search

tailwindlabs / headlessui

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

Combobox: When ComboboxInput is clicked combobox gets closed #3383

Closed prtmwrkr closed 2 months ago

prtmwrkr commented 2 months ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.2

What browser are you using?

All

Reproduction URL

Working example v1.7.19

Failing scenario v2.1.2

Describe your issue

It's a simple combobox: you click the button, you can click one color from the list to select it; you can click the input box to focus it and filter the list... Here's everything is working fine. The demo is using version @headlessui/react@1.7.19.

The only difference in the two sandbox is the version of @headlessui/react; so this seems a regression in the library. Thoughts?

Thank you

thecrypticace commented 2 months ago

Hi! This is because you're nesting the combobox input inside the combobox button and the click on the input is bubbling to the button and closing the combobox. Placing an input inside a button is not supported and I am quite surprised that it worked at all in v1.7.

I'd advise against conditionally rendering the input of a combobox as the input is the element marked with role="combobox" — hiding it without some kind of replacement will make things less accessible.

I'm not sure what kind of UI you're trying to achieve but it's likely that you should render the entire combobox conditionally instead of just the input / button.

prtmwrkr commented 2 months ago

@thecrypticace Thank you - that helped.