Ensure that there is always an active option in the `Combobox` #1279

RobinMalfait · 2022-03-29T13:17:22Z

This PR ensures that the first non-disabled Combobox.Option will be the active one if no other active option exists.

This should improve the general UX of the Combobox component, because now you can search and immediately press Enter to choose that option instead of searching, pressing ArrowUp and then pressing Enter.

Some rules that apply:

If you have an active option already, that one should stay the active option as long as it can.
If no active option exists, but a Combobox.Option registers itself and is selected, then the first selected option will become the active one.
If you mosue out, then no active option should exist.
- This will prevent weird jumps/scrolls if you leave the last option with your mouse and it jumps up to make the first option active.

This 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.

This will ensure that the first non-disabled option is the active one if no other active options exist. This means that any time you search for something that the first result is the active one and you can just press <kbd>Enter</kbd> to activate the option. However, there are a few rules that we have to take into account: - If you just open the Combobox, and there is a `selected` Combobox.Option, then we can't make the first option the active one. The first selected Combobox.Option has precedence over this one. This is important and rather tricky because Combobox.Option's register themselves at some point (later) in time. - If you already have an active option, then that option should stay active. If it changes position, then the activeOptionIndex is adjusted to account for that. - If you "mouse leave" an option, then no option should be active. It will be re-enabled the moment you start typing OR if you re-open the Combobox. Otherwise, it can happen that you are at the bottom of the list, mouse leave, and we scroll all the way back up to make the first item the active one which is not good for UX reasons.

vercel · 2022-03-29T13:17:26Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-react – ./packages/playground-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/9h5Bsv4GT3HhwzVDqnKSYSrLXC2Q
✅ Preview: https://headlessui-react-git-ensure-active-combobox-option-tailwindlabs.vercel.app

headlessui-vue – ./packages/playground-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/94SD1kcxhUhjJZxhoQWHUoanhDcP
✅ Preview: https://headlessui-vue-git-ensure-active-combobox-option-tailwindlabs.vercel.app

cabello · 2022-03-29T15:01:53Z

Great contribution! The behaviour is slightly odd:

clear any active items using the mouse
go to the input field
filter
first option is selected as expected
arrow down stays in the first option, requiring another arrow down to go to the next one

Screen.Recording.2022-03-29.at.11.00.19.AM.mp4

calthomson · 2022-03-29T15:38:17Z

+1 to the behavior that @cabello explained, I am also experiencing this.

Edit: I can also recreate the behavior like so, so it may not just be related to this change:

Open Combobox.
Key down to the first option (without any filtering/searching). First option is selected.
Key down again. First option remains selected.
Key down again. Second option is now selected. Key down works from this point on.

TL;DR: It takes 3 key downs to get to the second option in the list, when it should take 2.

cc @RobinMalfait

martinszeltins · 2022-03-29T16:29:22Z

Super excited about this PR, can't wait to start using it. Hope the keyboard navigation issues get resolved before the release.

RobinMalfait · 2022-03-29T16:29:28Z

@calthomson @cabello yikes, that happens when you work with selected values in your tests 😅 I could reproduce this in tests. Hold on, brb.

Edit: #1281

aliemir · 2022-03-29T18:20:13Z

Does not work at initial load when Combobox.Options's static is set as true. Not sure if it should though, but I think it should focus to the first index 😅

martinszeltins · 2022-04-01T11:41:04Z

Is this already released in stable?

sgehrman · 2022-04-02T03:59:52Z

Xerox invented this like 40 years ago, and headless can't figure this out. :) Waiting for the new build.

brampurnot · 2022-06-10T12:18:59Z

is there also a way to deactivate this?

cabello · 2022-06-29T13:28:59Z

Hi people, if you would like this to be deactivated use the emoji reactions, otherwise you are notifying everyone participating in this issue with non helpful "me too" comment.

Sendrel · 2023-06-29T10:27:13Z

Are there any alternatives to remove this functionality? Kinda like a noInitialOptionSelected prop or a hack perhaps? I've tried manipulating data attributes (that handle the "activeness" of the option) of the respective html elements and it doesn't seem to work..

I am trying to replicate the "freeSolo" of material ui's autocomplete
https://mui.com/material-ui/react-autocomplete/#free-solo
I've already done the work.. the last thing that i need to do is just remove this initial option select.

ScottEAdams · 2023-07-14T10:29:58Z

To trick this into being "disabled" you can use the custom values from the docs:

https://headlessui.com/react/combobox#allowing-custom-values

<Combobox.Option value={{ text: yourSearchText }} className='hidden' />

RobinMalfait added 2 commits March 29, 2022 15:07

filter list based on query in the playground

7d31267

vercel bot deployed to Preview – headlessui-react March 29, 2022 13:17 View deployment

vercel bot deployed to Preview – headlessui-vue March 29, 2022 13:17 View deployment

update changelog

be60fd9

vercel bot deployed to Preview – headlessui-react March 29, 2022 13:21 View deployment

vercel bot deployed to Preview – headlessui-vue March 29, 2022 13:21 View deployment

RobinMalfait merged commit 419ffda into main Mar 29, 2022

RobinMalfait deleted the ensure-active-combobox-option branch March 29, 2022 13:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure that there is always an active option in the `Combobox` #1279

Ensure that there is always an active option in the `Combobox` #1279

RobinMalfait commented Mar 29, 2022 •

edited

Loading

vercel bot commented Mar 29, 2022 •

edited

Loading

cabello commented Mar 29, 2022

calthomson commented Mar 29, 2022 •

edited

Loading

martinszeltins commented Mar 29, 2022

RobinMalfait commented Mar 29, 2022 •

edited

Loading

aliemir commented Mar 29, 2022

martinszeltins commented Apr 1, 2022

sgehrman commented Apr 2, 2022

brampurnot commented Jun 10, 2022

cabello commented Jun 29, 2022

Sendrel commented Jun 29, 2023 •

edited

Loading

ScottEAdams commented Jul 14, 2023

Ensure that there is always an active option in the Combobox #1279

Ensure that there is always an active option in the Combobox #1279

Conversation

RobinMalfait commented Mar 29, 2022 • edited Loading

vercel bot commented Mar 29, 2022 • edited Loading

headlessui-react – ./packages/playground-react

headlessui-vue – ./packages/playground-vue

cabello commented Mar 29, 2022

calthomson commented Mar 29, 2022 • edited Loading

martinszeltins commented Mar 29, 2022

RobinMalfait commented Mar 29, 2022 • edited Loading

aliemir commented Mar 29, 2022

martinszeltins commented Apr 1, 2022

sgehrman commented Apr 2, 2022

brampurnot commented Jun 10, 2022

cabello commented Jun 29, 2022

Sendrel commented Jun 29, 2023 • edited Loading

ScottEAdams commented Jul 14, 2023

Ensure that there is always an active option in the `Combobox` #1279

Ensure that there is always an active option in the `Combobox` #1279

RobinMalfait commented Mar 29, 2022 •

edited

Loading

vercel bot commented Mar 29, 2022 •

edited

Loading

calthomson commented Mar 29, 2022 •

edited

Loading

RobinMalfait commented Mar 29, 2022 •

edited

Loading

Sendrel commented Jun 29, 2023 •

edited

Loading