New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Combobox Input requires hitting enter twice to submit a form #6228
Comments
Maybe we could modify react-spectrum/packages/@react-aria/combobox/src/useComboBox.ts Lines 118 to 120 in 64ed130
preventDefault if the user is in an allowsCustomValue combobox and none of the keys are focused?
|
Correct me if I'm wrong, but this issue is only a problem when both So I'm not entirely sure if it's a good idea to add an additional logic in the above if-statement to handle this specific use case? since it makes sense to close the menu first (even if it's an empty one), and then submit the form? Would there be a better way to deal with this? |
There could also be the case where the user's custom value is a substring of the combobox's dropdown values in which case the dropdown would be open still even if |
For now, I've added a workaround that adds a keypress event listener to the input and manually triggers a click on a submit button we have in our component if there's no focusedKey |
Provide a general summary of the issue here
Some of my consumers are trying to switch to our Combobox and are running into a few issues, one is #5234, so I'll respond in that issue for that
The other is that, when using "allowsCustomValue," it requires two enter presses to submit the html form when the popover is open - one to close the popover, one to submit the form. Generally, hitting enter inside of an input submits an HTML form, no JS required, but the combobox logic is stealing the keypress.
🤔 Expected Behavior?
When I hit enter inside of a combox input the html form submits
😯 Current Behavior
It requires two enters - one to close the popover, one to submit the form
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/vigilant-frost-8fz2ns?file=%2Fsrc%2FApp.tsx
Version
Dec 2023 release, except for overlays which is 3.19.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
OSX Sonoma
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: