search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.68k stars 1.06k forks source link

Combobox's `onChange` also fires on no change #3202

Closed matijs closed 3 months ago

matijs commented 4 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.0.3

What browser are you using?

Safari, Firefox

Describe your issue

Acoording to the docs, the onChange prop of a Combobox…

…is called when a new option is selected’ (emphasis mine).

If a user clicks outside the Combobox without having selected an option, or when the user selects the same option that was already selected, the onChange handler also fires. It's easy enough to work around, but it feels like the handler should only fire on an actual change :)

RobinMalfait commented 4 months ago

Hey!

That should definitely not be the case, my guess is that you are defining an array of objects inside your render function and therefore each option is going to be a new instance of the object every time the component rerenders.

Can you share a minimal reproduction repo?

RobinMalfait commented 3 months ago

Hey! Going to close this one since we haven't heard back, but feel free to reopen a new issue if you're able to provide a minimal reproduction of this 👍

matijs commented 3 months ago

@RobinMalfait ah, will do, I had not found the time just yet. Your guess kind of helped in that indeed each option is a new instance (we use Combobox as a autosuggest) and that would explain firing onChange. However, with a fixed array defined outside of the render function reselecting an already selected option does seem to fire an undesired onChange.