How to build menu with a search field

[deebov]

What would be the best way to build a menu with a search field using using react-aria-component?

You can see what I mean in the example of Notion. This is very similar to combobox but here the input field is kind of attached to the list and does not contain the current selected value but rather acts like a search field for menu items. I tried to just put a simple input alongside menu items but when you hover menu items the focus moves away from the input. But we'd like to have the focus on input even when you hover and navigate menu items with arrow keys. I also tried to patch the MenuItem component to pass down shouldUseVirtualFocus to useMenuItem but then the keydown events are not propagated to the menu element when the input is focused.

CleanShot.2023-10-27.at.12.48.55.mp4

[reidbarber]

I think you'll want to use a Combobox, but just clear the input and selection once an item is selected.

[deebov]

I think the biggest problem would be to keep the focus inside a text field while navigation thought the list since list items take away focus.

[deebov]

Any tips to overcome this challenge would be very helpful.

[deebov]

I actually tried building what I described using useComboBox and that turned out well. Except useComboBox does not support multi-selection which we do need.

[snowystinger]

The way combobox work is it keeps focus in the field and has a virtual (appearance only) focus which moves in the list
it might be useful for you to look at how our Mobile version of Combobox works https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/combobox/src/MobileComboBox.tsx since that sounds pretty close.

A combobox cannot support multi select, but if you're down at the hook level, you could swap out for multi select and rebuild useComboboxState on top of that. As long as it's a short list and not async, that should be fine in theory. However, I think you'll quickly run into some problems in terms of usability.

The reason we don't allow for it is because when the combobox is closed, there is no good way right now to show all the selected items and it isn't a great idea to hide them in an a popover which contains an incomplete list or very long list where users could miss what they have selected vs not. We also wouldn't know how to filter the list when it is reopened, would it be the first selected entry? second? last?

It may make more sense to have your textfield just be a filter with one value, the current filter, and then a list with multiple selection enabled below it.

[Pouet--]

@deebov Hello, I am trying to build the same behavior for a dropdown menu with a search input and a list with virtual focus. Do you have any example or advice with using the react-aria hooks ? Thank you in advance