Feature: Autocomplete Input

[Dataxelio]

Can you add either an autocomplete input or allows to use Menu.Button as input?
Thanks

[ghost]

I would love to see an autocomplete input.
Maybe in 2 variations:

1. Select: For autocomplete with static options like countries.
2. Textinput: An freetext input field with wai-aria suggestions

[alejandrolsca]

I need those, definitely! +1

[raphaelsaunier]

Casting my vote for this feature as well!

You could very well shove an <input> element into a Menu.Button by using the as prop (i.e. <MenuButton as="div"><input …></MenuButton>) and get semantically correct markup (in fact, I've tried doing just that with the Listbox component before landing here). However the various mouse and keyboard event handlers will get in the way and I guess that it will require a whole new component to handle all the micro-interactions correctly.

Related: #372

[raphaelsaunier]

@jokull yes exactly! On top of that, I also had to include a way to handle async suggestions, show loading states, and highlight matching strings in the list of suggestions based on the input. Though you could argue that this is orthogonal to the core functionality of such a component.

Either way, it'll be interesting to see how @RobinMalfait and the Tailwind Labs team tackle this if they choose to support it. The WAI-ARIA's Combo Box sections outlines many of the considerations and best practices which could help shape this component.

[andresespinosapc]

Did you guys make it work?

@raphaelsaunier how do you open the Menu.Items manually? Do you have any sample code?

[jokull]

Here is our custom SearchDropdown.tsx. It doesn't have good focus management or keyboard navigation for results. But it works for us for now ;)

[raphaelsaunier]

You went further than I did, @jokull! 😅

@andresespinosapc I'm not sure now, and I can't dig up the code snippet, but I think it was by using the static prop (on ListboxOptions or MenuItems, depending on which one you use).

[Tylerian]

I came to the same conclusions without luck. Here's a related Idea to allow using the ListBox component for this purpose: #677

[jegelkraut]

I needed a Listbox with autocomplete too and I came up with this solution:

<template>
    <Listbox as="div" v-model="selected" v-slot="{ open }">
        <ListboxLabel class="block text-sm font-medium text-gray-700"> Assigned to </ListboxLabel>
        <div class="mt-1 relative">
            <ListboxInput></ListboxInput>

            <div v-show="open">
                <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
                    <ListboxOptions class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" static>
                        <ListboxOption as="template" v-for="person in people" :key="person.id" :value="person" v-slot="{ active, selected }">
                            <li :class="[active ? 'text-white bg-indigo-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
                                <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
                                    {{ person.name }}
                                </span>

                                <span v-if="selected" :class="[active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4']">
                                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
                                </span>
                            </li>
                        </ListboxOption>
                    </ListboxOptions>
                </transition>
            </div>
        </div>
    </Listbox>
</template>

So instead of using the default ListboxButton component I created my own ListboxInput component to open/close the Listbox:

<template>
    <div class="pointer-events-none" ref="listboxInputRef">
        <div class="relative rounded-md shadow-sm">
            <input v-model="searchText" type="text" name="account-number" id="account-number" class="pointer-events-auto focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-10 sm:text-sm border-gray-300 rounded-md" placeholder="Select a person" @click="openListbox" @focus="openListbox" @blur="onBlur" @keydown="onKeydown" />
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <SelectorIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
            </div>
        </div>
    </div>
</template>

<script>
import { inject, getCurrentInstance, watch, ref, onMounted } from "vue";
import { SelectorIcon } from "@heroicons/vue/solid";

export default {
    components: {
        SelectorIcon,
    },
    setup() {
        const symbols = Object.getOwnPropertySymbols(getCurrentInstance().parent.provides);
        const listboxSymbol = symbols.find((symbol) => symbol.toString() == "Symbol(ListboxContext)");
        var api = inject(listboxSymbol);

        const searchText = ref(api.value.value.name);
        const listboxInputRef = ref(null);

        // to prevent closing options on 2nd click in input
        onMounted(() => {
            api.buttonRef.value = listboxInputRef.value;
        });

        function openListbox() {
            api.openListbox();
        }

        function onBlur() {
            searchText.value = api.value.value.name;
        }

        function onKeydown(event) {
            if (event.key == " ") return;
            api.optionsRef.value.dispatchEvent(new event.constructor(event.type, event));
        }

        watch(searchText, (value) => {
            if (api.value.value.name == value) return;
            api.clearSearch();
            api.openListbox();
            api.search(value);
        });

        watch(api.value, (value) => {
            searchText.value = value.name;
        });

        return { openListbox, onBlur, onKeydown, searchText, listboxInputRef };
    },
};
</script>

The interesting lines are the first three in setup(), as this is kind of a hack to get the api Object from the Listbox component. The Listbox component uses the provide/inject api from vue to pass the api Object to its children. But the key to inject the api Object is a local Symbol. The first two lines are a workaround to get the reference to this Symbol so the api injection works. The api Object allows to open/close the Listbox programmatically. As this doesn't use the ListboxButton component, focus is fine. The component also passes the keydown events from the input to the ListboxOptions components so even the keyboard events do work. This should work similar with the Menu component.

Strangely enough, this has been working fine so far but I also would love to see a built in autocomplete solution with Listbox and Menu.

[jtomaszewski]

Doesn't https://headlessui.dev/react/combobox solve this?

[raphaelsaunier]

Oh wow, that just came out! It might actually solve this, yes.

Will have to try it out in a context where the options are fetched asynchronously.

[sohebcakewalk]

Hey guys,

Does it support free text?

I am struggling with it.

[sohebcakewalk]

@jtomaszewski
Does it support free text?

I am struggling with it.