Autocomplete with Listbox in Popover

[estenp]

The Autocomplete API seems pretty minimal, and the docs are somewhat lacking (maybe somewhat due to the minimal API).

All examples using a Popover put the entire Autocomplete in the Popover (command palette, emoji picker), but there isn't any documentation on how to configure a static input with the results Listbox in a Popover.

In other words I am effectively looking for a ComboBox where the first i.e. most matching item is autofocused (virtually)

The Autocomplete is missing pretty core props that would enable this sort of behavior, e.g. menuTrigger.

Here is my stab:

function AutocompletePopoverExample(props) {
  let { contains } = useFilter({ sensitivity: "base" });

  const triggerRef = useRef(null);

  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
  const [inputValue, setInputValue] = useState("");

  return (
    <Autocomplete {...props} filter={contains} onInputChange={setInputValue} inputValue={inputValue}>
      <TextField ref={triggerRef} 
            onFocus={() => setPopoverIsOpen(true)} 
            onBlur={() => setPopoverIsOpen(false)}
        >
        <Label>Automcomplete Popover</Label>
        <Input className={"border border-lime-300"} />
      </TextField>
      <Popover isOpen={popoverIsOpen} triggerRef={triggerRef} isNonModal>
        <ListBox aria-label="Tags" selectionMode="multiple" renderEmptyState={() => "No results."} style={{ height: 200 }}>
          <ListBoxItem>News</ListBoxItem>
          <ListBoxItem>Travel</ListBoxItem>
          <ListBoxItem>Shopping</ListBoxItem>
          <ListBoxItem>Business</ListBoxItem>
          <ListBoxItem>Entertainment</ListBoxItem>
          <ListBoxItem>Food</ListBoxItem>
          <ListBoxItem>Technology</ListBoxItem>
          <ListBoxItem>Health</ListBoxItem>
          <ListBoxItem>Science</ListBoxItem>
        </ListBox>
      </Popover>
    </Autocomplete>
  );
}

When I type into the input, the onBlur callback actually runs which hides my Popover. Removing the Autocomplete wrapper causes the onBlur to no longer fire. Perhaps this blur event occurs do to the "auto focusing" of the first listbox item?

What is the best way to do this? Am I better off trying to figure out how to auto focus the first item in the results list on a ComboBox?