kobalte icon indicating copy to clipboard operation
kobalte copied to clipboard

Select.onChange is triggered when Select.options is changed

Open yinonburgansky opened this issue 4 months ago • 1 comments

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

  1. Click on "Add new option to Select" button
  2. View the Select.onChange trigger count incremented 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.

yinonburgansky avatar Oct 30 '25 16:10 yinonburgansky

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} />
  )

Blankeos avatar Nov 09 '25 14:11 Blankeos