GeekyEggo
Select doesn't properly support onchange event.
I was perusing this as a potential overhaul for my PI, but I currently use the onchange="funcXYZ(this.value)" to react to changes when a new selection is made.
I can't seem to get it to work?
Hey @SENTINELITE, thanks for expressing interest in the components.
Each component currently exposes a custom valuechange event which is invoked when any of the following occur:
- When the value first loads in the PI, i.e. the component reads the settings and populates the component.
- When the value is changed by the user.
- When the value is changed due to the PI receiving
didReceiveSettings, i.e. the plugin changed the settings and the PI is synchronizing.
Here is a usage example.
<!DOCTYPE html>
<html>
<head lang="en-gb">
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/gh/geekyeggo/sdpi-components@v2/dist/sdpi-components.js"></script>
</head>
<body>
<sdpi-item label="Select">
<sdpi-select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</sdpi-select>
</sdpi-item>
<script type="text/javascript">
document.querySelector("sdpi-select").addEventListener('valuechange', function (ev) {
console.log(ev.target.value); // 1, 2, or 3
});
</script>
</body>
</html>
Please let me know if you have questions, and any feedback is appreciated.
I've also noticed that this event isn't documented anywhere on https://sdpi-components.dev, so I'll be sure to make a note to get that updated. 👍
Awesome, thanks for pointing that out, Geeky! I'll give it a go next week!