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

[DOCS]: Listbox states that "Enter" on button will open the listbox #3216

Closed JakeDluhy closed 4 months ago

JakeDluhy commented 4 months ago

Not sure if this is a bug or a docs issue, but the docs for the Listbox in v2 state that "Enter" will open the Listbox, but I was not finding that to be the case in my application. Looking at the code it looks like that is not the case in the code either: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/listbox/listbox.tsx#L763

So I think the docs need to be updated?

RobinMalfait commented 4 months ago

Hey!

Yep the docs were wrong, we changed this behavior for Headless UI v2. If you focus the ListboxButton and press enter (while the Listbox is closed) then the parent form (if any) will submit.

The reason for this change is so that every form-like component can submit the form when pressing enter. If you want to open the Listbox with the keyboard, then you can still use the ⬆︎, ⬇︎ and space keys.

This has been fixed and the docs have been updated.