Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[BUG] Combobox in a <form> tag issue #1282

Closed
nilooy opened this issue Mar 29, 2022 · 1 comment · Fixed by #1285
Closed

[BUG] Combobox in a <form> tag issue #1282

nilooy opened this issue Mar 29, 2022 · 1 comment · Fixed by #1285
Assignees
@RobinMalfait

Comments

@nilooy
Copy link

nilooy commented Mar 29, 2022 •
edited
Loading

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

What version of that package are you using?
^1.5.0

What browser are you using?
Chrome 99.0.4844.84 (Official Build) (x86_64)

Reproduction URL
https://codesandbox.io/s/delicate-waterfall-fnrsb3?file=/src/Autocomplete.js

Describe your issue
Awesome package 💯
I used Combobox in a form tag and added onSubmit event to it but with Combobox it doesn't work. I guess combo box has keyboard event that is conflicting with it, is there any know solution?
@nilooy nilooy changed the title Combobox in a <form> tag issue [BUG] Combobox in a <form> tag issue Mar 29, 2022
@RobinMalfait RobinMalfait self-assigned this Mar 30, 2022
RobinMalfait added a commit that referenced this issue Mar 30, 2022
@RobinMalfait @arlyon
ensure we can submit a form from a closes Combobox
96f14b6 
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 Alexander, so wanted to include
them as a co-author because of their initial work.

Co-authored-by: Alexander Lyon <[email protected]>
@RobinMalfait RobinMalfait mentioned this issue Mar 30, 2022
Merged
RobinMalfait added a commit that referenced this issue Mar 30, 2022
@RobinMalfait @arlyon
ensure we can submit a form from a closes Combobox
cd879d3 
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 <[email protected]>
RobinMalfait added a commit that referenced this issue Mar 31, 2022
@RobinMalfait @arlyon
ensure we can submit a form from a closed Combobox
979b45b 
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 <[email protected]>
RobinMalfait added a commit that referenced this issue Mar 31, 2022
@RobinMalfait @arlyon
ensure we can submit a form from a closed Combobox
0127cd0 
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 <[email protected]>
RobinMalfait added a commit that referenced this issue Mar 31, 2022
@RobinMalfait @arlyon
Allow Enter for form submit in RadioGroup, Switch and `Combobox…
c475cab 
…` improvements (#1285)

* improve rendering of hidden form fields

* add `attemptSubmit` helper

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.

* ensure we can submit a form from a closed Combobox

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 <[email protected]>

* ensure we can submit a form from a RadioGroup

* ensure we can submit a form from a Switch

* simplify / refactor form playground example

* update changelog

Co-authored-by: Alexander Lyon <[email protected]>
@RobinMalfait
Copy link
Member

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1285, and will be available in the next release.

You can already try it using:

  • npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
  • npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow Enter for form submit in RadioGroup, Switch and Combobox improvements tailwindlabs/headlessui
2 participants
@RobinMalfait @nilooy