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.

[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

[ozguruysal]

I need to build a Searchable Menu component too and drafted this example using ComboBox as suggested by @reidbarber. It's far from finished of course but the problem is when you click on the menu and hover on any item or type something to filter the options, I see this error being logged in the console:

TypeError: Cannot read properties of null (reading 'contains')

Is there a way to fix this? I'm happy to use the hooks too.

[snowystinger]

Two observations

1. It looks like aria-hideoutside mutation observer is responsible for the error message. We'd need to log out what the value is if it's not a node to see what's happening there.
2. When I delete the value in the field, the combobox doesn't repopulate for some reason, I'm not sure what is going on there either.

If you're open to using the hooks, then I suggest having a look at our implementation of MobileCombobox in React Spectrum. It doesn't use the new RAC collections yet, but the gist should be the same.

[ozguruysal]

Thank you @snowystinger 👍, I'll review that.

Would be really nice to get that kind of composability at some point though, if technically feasible.

[selrond]

@deebov Autocomplete component is now in beta, allowing for this exact case among others