ℹ Filtering and sorting Listbox options

[Zertz]

Not sure where to put this but I thought this might be useful for other people!

The <Listbox /> component works really well for filtering and sorting, the tricky part for me was to figure out that the key prop needs to include the array index otherwise keyboard interaction doesn't work correctly since internally the options would keep their initial order.

Here's a heavily simplified example that I can share:

<HeadlessListbox onChange={() => undefined} value="search">
    <HeadlessListbox.Options>
        <HeadlessListbox.Option value="search">
            <input type="search" />
        </HeadlessListbox.Option>
        {[
            { label: "Greetings", value: 1 },
            { label: "Hello", value: 2 },
        ].map((option, i) => (
            <HeadlessListbox.Option key={`${i}.${option.value}`} value={option.value}>
                <div>{option.label}</div>
            </HeadlessListbox.Option>
        ))}
    </HeadlessListbox.Options>
</HeadlessListbox>

I use match-sorter to do the actual filtering and sorting.