Allow Enter for form submit in RadioGroup, Switch and Combobox improvements
#1285
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is being automatically deployed with Vercel (learn more). headlessui-react – ./packages/playground-react🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/FqYF7CFaSYmAsqJ9qDmPXNGPD1K5 headlessui-vue – ./packages/playground-vue🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/4QpY5VKqRrXAxBoGT2R9CR2daoPo |
RobinMalfait
force-pushed
the
allow-submits-in-combobox-input-field
branch
from
31bf3ff
to
96f14b6
Compare
RobinMalfait
force-pushed
the
allow-submits-in-combobox-input-field
branch
from
96f14b6
to
cd879d3
Compare
RobinMalfait
changed the title
Combobox
RobinMalfait
changed the title
ComboboxCombobox
RobinMalfait
changed the title
Combobox
RobinMalfait
force-pushed
the
allow-submits-in-combobox-input-field
branch
from
cd879d3
to
a813b2e
Compare
This will allow us to _try_ and submit a form based on any element you pass it. It will try and lookup the current form and if it is submittable it will attempt to submit it. Instead of submitting the form directly, we try to follow the native browser support where it looks for the first `input[type=submit]`, `input[type=image]`, `button` or `button[type=submit]`, then it clicks it. This allows you to disable your submit button, or have an `onClick` that does an `event.preventDefault()` just like the native form in a browser would do.
When the Combobox is closed, then the `Enter` keydown event will be ignored and thus not use `event.preventDefault()`. With recent changes where we always have an active option, it means that you will always be able to select an option. If we have no option at all (some edge case) or when the combobox is closed, then the `Enter` keydown event will just bubble, allowing you to submit a form. Fixes: #1282 This is a continuation of a PR ([#1176](#1176)) provided by Alexander, so wanted to include them as a co-author because of their initial work. Co-authored-by: Alexander Lyon <arlyon@me.com>
RobinMalfait
force-pushed
the
allow-submits-in-combobox-input-field
branch
from
a813b2e
to
f6368a8
Compare
RobinMalfait
changed the title
Enter for form submit in RadioGroup, Switch and Combobox improvements
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When the Combobox is closed, then the
Enterkeydown event will be ignored and thus not useevent.preventDefault().With recent changes where we always have an active option, it means that you will always be able to select an option.
If we have no option at all (some edge case) or when the combobox is closed, then the
Enterkeydown event will just bubble, allowing you to submit a form.Fixes: #1282
This is a continuation of a PR (#1176) provided by Alexander, so wanted to include them as a co-author because of their initial work.
This also applies a few more form related improvements.
display: noneto theVisuallyHiddencomponent, otherwise even with thehiddenandreadOnlyattributes it is still focusable...Enteron other form related elements.