Search in Listbox

[sathovsepyan]

Hi,
I would like to have Listbox with search support. I tried adding an input in Listbox.Button and it would work fine, except after the click on the input the focus automatically goes to Listbox.Options.

Here is the codesandbox with my attempts.

The behaviour seems to be expected and is documented:

...when the menu is open, the list of items receives focus and is automatically navigable via the keyboard.

But I'm wondering if it's possible to overcome this and have search in Listbox.

[baijii]

I have a similar problem. @sathovsepyan, your problem I solved by "redirecting" the focus event to an input field.
(it's vue but you'll propably get the point)

<ListboxOptions @focus="searchInput?.focus()">
  <div>
    <FormInput
      ref="searchInput"
      v-model="searchQuery"
      placeholder="Search airports"
    />
  </div>
  
  <ListboxOption
    v-for="airport in airports"
    :key="`airport-${airport.id}`"
  >
</ListboxOptions>

But then there is a next problem: As the options change while I'm typing, also the internal search functions within Listbox will calculate the active item index. That leads to unpredictable order of the items while navigating with keyboard.

An easy solution could be to have a prop in Listbox.Options to deactivate the internal search (similar to static).
Perhaps a boolean prop searchable with default of true would by quite suitable.

Alternatively (but more challenging), headlessui could provide a version with input field by itself.

Also if someone knows a workaround to deactivate the internal search, I would really appreciate.

[EmilMoe]

@focus="$refs.searchInput?.focus()"

[sentiasa]

Hey @baijii - did you find a solution for the "unpredictable order of the items while navigating with keyboard."? I'm experiencing the same problem.

[baijii]

Hi @sentiasa - I just tried it out and this error seems to be gone. Maybe it is resolved during some update. Are you using the latest versions?

I'm using

"@headlessui/vue": 1.4.3
"headlessui": 0.0.0
"vue": 3.2.29
"tailwindcss": 3.0.18

[sentiasa]

Hi @baijii - I upgraded to 1.4.3 but still same issue 🤦‍♂️

To replicate it, I need to

• write in the search box and select
• then reopen the select
• then using up/down keys and its order is wrong

Can you please confirm this is what you tried, too? Maybe I'm doing something wrong.
Thanks

[cabello]

I am also facing this issue while building a command palette using Combobox, when I search the results get filtered, using arrows cause the navigation to go out of order.

[sathovsepyan]

Thanks for sharing your solution @baijii.

I ended up using react-select since it provides search (and a bunch of other features) OOTB (for Vue, vue-select seems to be the equivalent).

The downside of this is that it has a predefined UI and I had to customize it in a way different from the rest of my components (where I use Tailwind CSS). But in my opinion, that's easier than implementing search, multi-select, loading, and async loading from scratch at this point.

It will be great to switch back to HeadlessUI Listbox, once those features are implemented!

[diego-lipinski-de-castro]

I also think that searching and multi-select is a big hole in this library, having to work around this sucks

[shoaibsharif]

I am having trouble too. Had to go back vue-select which is no fun when I would like to overwrite the styles.

[fkrauthan]

Same here. Had to switch back to react-select and overwrite some of there components to make the look and feel sort of. Would be great if this can be addressed here as a native feature at some point.

[EmilMoe]

Take a look here, it works for me, though it requires some customization

#626 (comment)

[EmilMoe]

Should mention my approach is Vue, not sure if it's called $ref in react

[fkrauthan]

I think I've tried that in react but it had weird issues with the state management inside headlessui. But don't fully recall what my issue was.

[moSanad]

hello i think the main question has the answer, only need some arranges, please take a look here https://codesandbox.io/s/late-dream-6bfhv?file=/src/App.js

[adarmanto]

This is great, but when hit the space button, it acts as a select option, is there any workaround for this issue?

[ACPK]

@sathovsepyan @baijii - I believe what you're looking for is a combobox W3C - Example 3: List with Inline Autocomplete.

It looks like this was added to HeadlessUI's main branch 11 days ago. It's not on npm yet, so you'd have to use npm install @headlessui/react@insiders Installing the insiders version.

#1093

[baijii]

Combobox is exactly the thing, that was missing at the time. Works like a charm. https://headlessui.com/react/combobox

[minhuaF]

It work for me, Use a div over the input and prevent events from bubbling up

<Listbox.Button>
                {open ? (
                  <div
                    onClick={(event) => {
                      event.stopPropagation();
                      event.preventDefault();
                    }}
                  >
                    <InputComponent
                      autoFocus
                      onChange={handleSearchInputChange}
                      value={searchValue}
                      resetClassName={styles.searchInputStyle}
                      onBlur={handleSearchInputReset}
                    />
                  </div>
                ) : (
                  <span className="dropdown-component-display" title={label}>
                    {label}
                  </span>
                )}
                <span className={'dropdown-component-arrow'}>
                  <IconComponent
                    name={open ? 'Search' : 'ChevronDown'}
                    className="dropdown-component-arrow-color"
                    aria-hidden="true"
                  />
                </span>
              </Listbox.Button>

[baijii]

@minhuaF If it works out for you use Combobox instead. It does its job really good. https://headlessui.com/react/combobox