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?

[reinink]

@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?

@DanWebb Hey! So we never published an alpha release with this new behavior, but it is available in the latest v2.0.0 release that went out yesterday. You can test out this new behavior in the updated docs here: https://headlessui.com/react/combobox

[djerraballi]

So, testing this on v2 shows that it seems to be still broken. Clicking away from the combobox behaves exactly the same as hitting the return key (enter).

What I think is happening is that when combobox displays options, the first option is sort of "hovered" by default. Hovering over that option and then clicking away has the desired behavior of closing the options. Ive tested this by hitting the down arrow and clicking away and noted that the second option in the list is what ends up triggering the onChange on the combobox.

[DanWebb]

@reinink Thanks! I've tested on 2.0.3 this morning and it all seems to be fixed 👍

@djerraballi I did have to move to the new components ComboboxInput instead of Combobox.Input, ComboboxOptions instead of Combobox.Options etc. I'm not seeing the onChange being called when clicking away from the input like it was before including when an item in the list is active.

[ali-ayyad-1]

This is also an issue when a value is already selected.

I have used the same demo used above demo on Stack blitz

Instead of
let selected = ref(null);
replace with to select the third item initially
let selected = ref({ id: 3, name: 'Devon Webb' });

Expected behaviour:
Devon Webb is selected

Actual behaviour:
First item is highlighted in the list and onBlur it will replace it.