Select.onChange is triggered when Select.options is changed
Describe the bug
Select.onChange is triggered when Select.options is changed,
even though Select.value didn't change.
According to the docs:
onChange (value: T | Array<T>) => void Event handler called when the value changes.
To Reproduce
https://stackblitz.com/edit/github-kgvrt2gr-ess6xamn?file=src%2Froutes%2Findex.tsx
- Click on "Add new option to Select" button
- View the
Select.onChange trigger countincremented even though the value didn't change.
Expected behavior
Updating Select.options shouldn't trigger Select.onChange.
According to the docs Select.onChange should only trigger when Select.value changes.
I'm using 0.3.11. For my case, this doesn't happen when I set the "options",
But the problem at the moment, is that onChange seems to get called after Select mounts? It's kind of problematic.
I have a mutation hooked up to <Select onChange /> It took me a while to find out why my mutation was getting called even when I didn't perform any action on the frontend. Turns out it was calling the mutation when the component loaded.
My only workaround to avoid this at the moment is adding this weird hack:
let hasMounted = false
const wrappedOnChange: any = (value: any) => {
console.log("on change is called")
if (!hasMounted) return
local.onChange?.(value)
}
onMount(() => {
setTimeout(() => {
hasMounted = true
}, 67) // 67 is the lowest millisecond I've tested for it to not trigger, but to be safe maybe set a higher number idk.
})
return (
<Select onChange={wrappedOnChange} />
)