Pressing Enter for form submit inCombobox did not work properly

[meruyert93]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
1.7.14

What browser are you using?
Chrome

Reproduction URL
https://codesandbox.io/s/combobox-in-form-v5k6km?file=/src/Autocomplete.js:4105-4202

Describe your issue
I have seen you have implemented allowing Enter for form submit in this PR #1285
However, it did not work, when I have Combobox and another input in the form.
If I remove another input, Enter submission works, but I need to add another input as well to my form.
The workaround was to add <button type='submit' className='hidden' /> hidden button to make it work.
You can test it in the codesandbox and play with it.

However, it would be great if you can improve this and make it work without adding hidden button.
Thanks a lot in advance!

[RobinMalfait]

Hey, thank you for this bug report! 🙏

While looking at this issue, I noticed that there are some cases where we were attempting to submit the form. We did this by looking for a submit-like button and invoking that. If such a button wasn't found then we didn't submit the form. However, in these scenario's we still want to try and submit the form. This is something that typically happens with our Switch component for example.

That said, looking at this particular example. The Combobox component itself isn't trying to do anything smart in regards to submitting forms. The only edge case it has for Enter behaviour is to select the active option if the Combobox is open. If it is not open, then we fallback to all the default behaviour of an input component.

I made a small reproduction without using Tailwind CSS or Headless UI at all. The default behaviour of a form is to not submit if there are multiple <input> elements without a submit button: https://jsfiddle.net/8zgx4a5t/

In the past we've always tried to follow the default behaviour as much as possible, so for now I would recommend to add a submit button just because that would be required in the use case where you are not using Headless UI at all.

I'm going to close this issue for now, but if more people want this particular behaviour then we can re-assess this decision and add it at a later point in time.

Hope this helps!