Feature: Combobox

[Wiz1991]

Instead of pressing buttons to skip to the option with that starting letter it would be far more intuitive and better if you could type and it gives you the closest match

[ahoiroman]

Would love to see this.

I recently started writing something like

    <input v-show="!value" ref="searchinput"
           v-model="searchString"
           :class="{'form-input': true, 'form-error': !!errorMessage, success: meta.valid, 'opacity-75 cursor-not-allowed': waiting || disabled}"
           :disabled="waiting || disabled" :placeholder="waiting ? 'Loading' : 'Type to search'" type="text"/>
    <Listbox v-model="value" ref="listboxinput">
        <div class="relative">
            <ListboxButton v-show="value"
                :class="{'form-input text-left h-full': true, 'form-error': !!errorMessage, success: meta.valid, 'opacity-75 cursor-not-allowed': waiting || disabled}">
                <span class="block truncate">{{ value }}</span>
                <span class="absolute inset-y-0 right-0 flex items-center pr-2 ">
                    <XIcon class="w-5 h-5 text-gray-400" @click.prevent="reset" aria-hidden="true"/>
                    <SelectorIcon class="w-5 h-5 text-gray-400 pointer-events-none" aria-hidden="true"/>
                </span>
            </ListboxButton>
            <transition
                leave-active-class="transition duration-100 ease-in"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0">
                <ListboxOptions
                    class="z-40 absolute overflow-auto max-h-60 form-input p-0 ring-0 focus:outline-none" :static="searchString !== ''">
                    Static: {{searchString !== ''}}
                    <ListboxOption
                        v-slot="{ active, selected }"
                        v-for="item in filteredItems"
                        :key="item"
                        :value="item"
                        as="template">
                        <li :class="[active ? 'bg-gray-100' : '', 'cursor-default select-none relative py-2 pl-10 pr-4',]">
                            <span
                                :class="[selected ? 'text-paragraph text-base' : 'text-paragraph text-base', 'block truncate',]">{{ item }}
                            </span>
                            <span
                                v-if="selected"
                                class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
                                <CheckIcon class="w-5 h-5" aria-hidden="true"/>
                            </span>
                        </li>
                    </ListboxOption>
                </ListboxOptions>
            </transition>
        </div>
    </Listbox>
    ```

but handling the focus is not really working out. So I have to continue using my own clumsy implementation of a combobox :-D  

[Wiz1991]

Seems very hard to maintain and reuse. What if you need to add async options? This would become infinitely more complex.

[AHBruns]

You're correct that its a notoriously fickle type of input to implement well, but arguably that's what makes it a good candidate. It's needed in a wide range of applications and has lots of common internal functionality that can be abstracted away. This feels like a major limitation compared to other headless ui libraries like React Aria (which has a combo box) and Radix UI (which is actively developing a combo box).

[AHBruns]

Hitting the same focus management issues. I'm convinced a combo-box should be its own component rather than a heavily modified listbox since it would require listbox to expose a bunch of very low-level focus management props which probably isn't a great API. I imagine having both combobox box and listbox share a common internal component then expose it in two different ways (mainly differing in focus management).

[AHBruns]

Scratch this. I think a hook would make more sense after reading Wiz1991's replies.

[rrackiewicz]

After poking around the Downshift.js examples all I could think is, "Headless UI needs this." Downshift provides hooks AND an uber component that can fill the need of combo/select/auto-complete/multi-select. As I've implemented my entire UI using Headless UI I'd rather not have to implement an entirely new library just for this functionality.

[roelandm]

Reach UI has this: https://reach.tech/combobox

[Wiz1991]

The point is not to use an entire UI library just for some component.
What i found best is to use a hook for it. Provides the best performance, accessibility and ease of implementation.

[AHBruns]

I agree that using a hook makes more sense than a set of components in this situation. Is that a reason to not build that hook into Headless UI though? Seems like it'd align with the goal of functionality w/o styling quite well.

[vmitchell85]

Since there hasn't been any update on this I started building my own... I plan to start working on separating it out into multiple components so they can be styled independently but here is what I got so far:

https://gist.github.com/vmitchell85/23dc7977ba7239747cbd73f199ba070b

[rgossiaux]

If you look at the open PRs you can see that they actually started working on a combobox very recently, FYI. Looks like it's still in development for now.

[vmitchell85]

Hopefully it's useful for someone while we wait for them to do their magic.