[a11y]: Listbox does not submit form on enter

[hauptrolle]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0.0-alpha.4

What browser are you using?

Chrome

Describe your issue

Same issue as in #2958. When hitting enter the form should be submitted. The listbox should just open with space. (To behave like the native select: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_form)

[reinink]

Hey! Thanks for reporting this.

I just did a bit of research, and it's interesting because Radix UI and React Aria both open the listbox (select) on enter, but Reach UI does not. Looking at the ARIA spec for the listbox pattern and it doesn't mention anything about the enter key, so I guess that means that libraries are free to implement that behavior however they prefer.

That said, given that all of the other form controls in Headless UI v2.0 submit the form when pressing the enter key (other than the Textarea component of course), I think it makes sense to update our Listbox component to behave the same way.

We're working on a PR to add that and will report back shortly when that's been added 👍

[reinink]

Hey! We just published an insiders release which updated the Listbox component to submit the form when pressing enter instead of opening it.

Here's how to install it:

npm install @headlessui/react@insiders

Hope that helps! 🤙