Combobox selects first item on blur

[NilsEvers]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.17

What browser are you using?

Chrome

Reproduction URL

Basic example on stackblitz

Describe your issue
When a Combobox that does not already have a value is closed by clicking outside the element, the first value is selected.

Steps to reproduce:

1. No value is yet selected in the Combobox (v-model = undefined)
2. Open the Combobox
3. Click outside the element to cancel the selection
4. The first item will be selected now

If the selection is cancelled by pressing the esc key the issue does not occur.

[reinink]

Hey thanks for reporting this! I've been able to reproduce this issue. It only happens (at least for me) when I open the combobox and immediately move the mouse away and click, however if I open the combobox and first hover over items in the dropdown and then move away and click, it doesn't happen. We'll look into it 👍

[omernoach]

same happens on @headlessui/react: 1.7.18

[eatmoarrice]

When you use the arrow keys to move up and down and then click outside, whichever option currently active will be selected.

[omernoach]

yes

[omernoach]

@reinink do you work on solution for react lib too?

[reinink]

Hey folks, thanks for your patience on this one. I've had a closer look at this today, and realizing now that this is actually expected behavior. By default the Combobox component in Headless UI requires a value. You can allow empty values using the nullable prop:

<Combobox value={selectedPerson} onChange={setSelectedPerson} nullable>

Here's an updated reproduction that uses this prop: https://stackblitz.com/edit/vitejs-vite-ncgpkn?file=src%2FApp.vue

You can read more about the nullable prop in the Headless UI documentation here: https://headlessui.com/react/combobox#allowing-empty-values

The combobox behaves oddly when you pass it a null value but don't have the nullable prop set — which is what you were experiencing.

Hope that helps! 🤙

[omernoach]

First of all thanks for the response, in the demo you sent the problem still exists. try to move up and down with the arrows and then click outside, it will select the focused one...
I've changed to nullable in my project and still got the same problem :/

[NilsEvers]

I can confirm that the issue is still present after setting the nullable prop.
Here is another demo on Stackblitz.
The behaviour is exactly the same. If you open the combobox and then click outside the element without first hovering over a combobox option, the first option will be selected.

[NilsEvers]

After additional testing I've noticed that you have to set the initial value of the ref to null. undefined does not work. Sorry, I missed that in your example.

But all in all I think this behaviour is really awkward and counterintuitive.
First of all, why do you have to set nullable in the first place? There is no way to clear the combobox anyway, so why is it the concern of the component. If you don't want to allow empty values, then don't bind the component to an empty value. I really don't see any benefit at all for this prop.
And not allowing undefined is another quirk that makes using this component way more involved than needed.

[reinink]

Hey folks! Just wanted to let you know that the upcoming v2 release is going to make the combobox "nullable by default". You can read more about this change in #3064.

Thanks for sharing all this feedback! 👍

[DanWebb]

@reinink I've tested this in the react v2 alpha and the issue still exists with or without the nullable prop – if there's an "active" option in Combobox.Options and users click anywhere outside the Combobox then the onChange callback will be fired passing the value of the active option.

Should this be re-opened?