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.

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

ComboboxInput blur should not auto-select active option when using a nullable combobox #3567

Open
ragulka opened this issue Nov 20, 2024 · 0 comments

Comments

@ragulka
Copy link

ragulka commented Nov 20, 2024

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.23

What browser are you using?

N/A

Reproduction URL

https://codesandbox.io/p/devbox/dawn-monad-zw5mx4?workspaceId=729001e6-f0c3-47a5-9572-0e032ebb9055

Note: I don't know why, but the combobox doesn't seem to work at all in the devbox sandbox - for example, keyboard navigation is completely unusable. Since the same code produces the issue locally, my hunch is that CodeSandbox may be capturing events or there may be some other environment issue.

Describe your issue

See video here: https://share.cleanshot.com/Pq71fTLm

  1. Create a nullable combobox
  2. Select a value
  3. Now, open the suggestions list and move the mouse cursor away from the combobox
  4. With the keyboard, highlight anotehr option (not the currently selected value)
  5. Without moving the mouse cursor (it should be outside of the combobox), make a click
  6. The combobox value is changed - this is unexpected

Expected behavior: when user clicks outside the combobox (which indicates the user wants to cancel any changes), the combobox should retain it's currently selected value, not auto-select the highlighted opion.

Selecting the highlighted value makes sense when user presses Enter or Tab, or clicks on the item, but not_ when they click outside the combobox and its suggestions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant