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 with immediate does not re-open after selecting a value #3477

Closed jimmyzzxhlh closed 2 weeks ago

jimmyzzxhlh commented 2 weeks ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.6

What browser are you using?

Chrome

Reproduction URL

Codesandbox

Describe your issue

If I have immediate on the Combobox, I would expect every time when the combobox is clicked on, the drop down always shows up. However, if I select a value from the combobox, and then click on the combobox again, since the focus has not gone away from the combobox, the drop down does not show up. I have to click somewhere else and then click on the combobox to re-focus and get the dropdown.

RobinMalfait commented 2 weeks ago

Hey!

The immediate prop opens the combobox when the input receives focus. When the combobox is open and you make a selection (using the mouse or keyboard), in both scenarios the combobox input still has the focus, so nothing changes.

That said, the moment you start typing, or press arrow down, the combobox will re-open again. More info: https://headlessui.com/react/combobox#opening-the-dropdown-on-focus

Closing because this works as designed.

Hope this helps!

jimmyzzxhlh commented 2 weeks ago

I'm not sure if this is the right design however. The behavior is more intuitive and more consistent to open the combobox dropdown whenever it is being clicked on, regardless of whether it has been focused on or not.