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?

[snowystinger]

We have some tasks to look into reimplementing ComboBox with an Autocomplete. We also have an issue open for auto focusing the first item in the ComboBox. There was a contribution #9189 which was most of the way there, this should help you get started in the meantime, also, if you'd like to pick up that Issue and make a new PR, that would be most welcome now that our big refactor of the repo is done.