Skip to content

Combobox not selecting active item on click outside (Vue) #3615

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

Open
robinperz-funda opened this issue Jan 16, 2025 · 1 comment
Open

Combobox not selecting active item on click outside (Vue) #3615

robinperz-funda opened this issue Jan 16, 2025 · 1 comment

Comments

@robinperz-funda
Copy link

robinperz-funda commented Jan 16, 2025

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

What version of that package are you using?
1.7.23

What browser are you using?
Chrome

Reproduction URL
https://stackblitz.com/edit/nuxt-starter-q6yucbhj

Describe your issue

If I use the combobox in desktop view, I can select the currently active item by clicking outside of the comboboxinput. On mobile however, it is not selecting the current active item in that case, but rather reverting to the previously accepted input. I would expect the same behavior here on mobile.

Edit: I'm currently thinking the default behavior should probably be dismissing the input in both desktop and mobile, instead of accepting the active item in both. But at least I would expect the same behavior on mobile and desktop

See video on Loom:
https://www.loom.com/share/69aa8f7340f74fb79cace3d4357f8177?sid=24491758-a728-49bf-b2ed-e2b380d2daf9

@ThibaudDauce
Copy link

Hi,

I found that setting nullable on the Combobox fix this issue for me. In the blur event (called before the click outside) https://github.com/tailwindlabs/headlessui/blob/%40headlessui/vue%40v1.7.23/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L1227-L1262 we select the active option if the Combobox is not nullable https://github.com/tailwindlabs/headlessui/blob/%40headlessui/vue%40v1.7.23/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L1257

Any idea if this is a feature or a bug @adamwathan?

I think it's logic that the nullable is require but the behavior seems still a little bit weird…

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

2 participants