Filter input within Listbox.Options

[kripod]

Hello,

Firstly, I’d like to express my gratitude for the amount of effort that goes into this project.

I wanted to combine Listbox and Combobox similarly to how Ariakit does it:

---

Initially, I wanted to add an <input role="searchbox"> element as a child of Listbox.Options, but it turns out that Listbox.Options already has role="listbox" defined and therefore it expects children to be selectable options.

After that, I’ve tried to create a popover with role="dialog" and then embed the search input and Listbox.Options as siblings, but in that case, the input can’t access and apply the aria-activedescendant used within the listbox options container.

Adding two new, optional components, namely Listbox.FilterInput and Listbox.Popover could mitigate the issue – when they’re used:

• Listbox.Popover should be responsible for locking focus and detecting outside clicks instead of Listbox.Options
• Listbox.Button should use aria-haspopup="dialog" instead of "listbox", while Listbox.Optionsshould retain the"listbox"` role
• Listbox.FilterInput should be a sibling of Listbox.Options and should have role="searchbox" (or "combobox"?), along with aria-controlsandaria-activedescendantattributes referencing the active item withinListbox.Options`

Unfortunately, I couldn’t find a way to implement this in userland, mainly due to the fact that listbox items aren’t announced anymore when an input within the options popover is focused 😕

Here’s a brief draft of my API proposal, based upon the basic example within the docs:

  const people = [
    { id: 1, name: "Durward Reynolds", unavailable: false },
    { id: 2, name: "Kenton Towne", unavailable: false },
    { id: 3, name: "Therese Wunsch", unavailable: false },
    { id: 4, name: "Benedict Kessler", unavailable: true },
    { id: 5, name: "Katelyn Rohan", unavailable: false },
  ];
  
  function MyListbox() {
    const [selectedPerson, setSelectedPerson] = useState(people[0]);

+   const [query, setQuery] = useState("");
+   const normalizedQuery = query.trim().replace(/\s+/g, " ").toLowerCase();
  
    return (
      <Listbox value={selectedPerson} onChange={setSelectedPerson}>
        <Listbox.Button>{selectedPerson.name}</Listbox.Button>
+       <Listbox.Popover>
+         <Listbox.FilterInput
+           onChange={(event) => {
+             setQuery(event.currentTarget.value);
+           }}
+         />
          <Listbox.Options>
            {people
+             .filter((person) =>
+               person.name.toLowerCase().includes(normalizedQuery)
+             )
              .map((person) => (
                <Listbox.Option
                  key={person.id}
                  value={person}
                  disabled={person.unavailable}
                >
                  {person.name}
                </Listbox.Option>
              ))}
          </Listbox.Options>
+       </Listbox.Popover>
      </Listbox>
    );
  }