Adding a filter text input to a dropdown menu

[DaniGuardiola]

I'm trying to create a dropdown menu that contains a text input at the top to filter among the options. The main problem I've faced is that the typeahead feature is conflicting with it, and removes focus from the text input to give it to the corresponding menu item.

For example, if the options are "America", "Europe" and "Antarctica" and I start typing "Europe" in the input, as soon as I type the first "E" it will switch focus over to the "Europe" item.

This is my main problem for now, although I do want to implement a few other behaviors, like:

• When the input is focused, on arrow down, focus the topmost menu item.
• When the topmost menu item is focused, on arrow up, focus the input.
• When input is focused, on ESC key down, close the menu.
• When input is NOT focused, but some menu item is, and the user presses a "text key" (e.g. not return or ESC), focus the input and populate it with the typed text.
• When input is focused, has a value and there's at least one option after filtering, highlight the topmost option. If return is pressed, trigger the onSelect handler for that option and close the menu (similar to just focusing that option directly and pressing return).
• When input is focused and tab / shift+tab is pressed, focus a menu item (this doesn't work on first render for some reason, maybe has something to do with the roving focus?)
• When a menu item is focused and tab / shift+tab is pressed, focus the text editor.

As I said, my main issue is the typeahead feature conflicting with the input. I've tried a bunch of things like preventing default, etc, but although I found some hacky ways to make it work, they all seem very fragile. How could I go about this?

My wishlist, in order of preference is:

• Add search/filtering support to the primitive natively. Ideally with support for your own text input component (like with slots or something like that).
• Allow disabling typeahead support.
• Improved event handling customization, with more escape hatches.

Thoughts? Thanks in advance :)

Update: I sort of fixed it by setting textValue to "" (empty string) on all items. Still feels pretty hacky though, just sharing in case it's useful to anyone.

[jjenzz]

Hi @DaniGuardiola 👋

It sounds like you are trying to convert the DropdownMenu into a Combobox but the latter is a very different pattern in terms of accessibility. It's unlikely that your component will be accessible with your current approach as the DropdownMenu is not intended for that use-case, it follows the Menu Button pattern.

We do have plans to build a Combobox, but it's not in progress at the moment I'm afraid 😞

[benoitgrelard]

Oh that's true, I glossed over this, yeah this is slightly different I guess you're right. We'll have to see if we can add a feature or if it needs to be a new primitive.

[DaniGuardiola]

If this is done properly, it's probably a popover with a combobox + combobox list inside. A combobox list doesn't need to necessarily be in a popover separate from the combobox (input) itself. Here's how you can achieve it with Ariakit: https://ariakit.org/examples/menu-combobox

It might be confusing to see Menu used there, but here's what Diego Haz (maintainer) told me: "Menu is MenuList + Popover, but it loses the menu semantics when you pass composite={false} to it".

Here's our component built with Ariakit (using this pattern): https://atlas-storybook.guide.co/?path=/story/components-menu--searchable

I guess once Combobox is ready, you could achieve something like this with Radix by composing it with a popover.

[benoitgrelard]

Not in the Linear case though, as it does hold a "value".

[DaniGuardiola]

You're completely right. This is still achievable in Ariakit by composing a Select and Combobox though, although I haven't had the chance to build this in our company yet, so I'm not super-familiar with it: https://ariakit.org/examples/select-combobox

[nandorojo]

Spotify.-.Snakehips.-.Sometimes.with.Daya.Earthgang.-.5.May.2023.mp4

Spotify is a nice example of a dropdown menu with a search.

[johnhforrest]

I just wanted to chime in and say we'd love a component like this as well. We ended up building our own Combobox component and then putting it inside of a radix DropdownMenu primitive. It mostly "just works" but there are definitely some rough edges around focus management. Ideally I'd love to see this as some sort of FilterableDropdownMenu primitive. Here's some screenshots: one of a top level menu and one within a submenu.

[BrianHung]

How do you prevent focus from escaping the input box on dropdown menu item hover?

[misha-erm]

Is there any chance you can share the solution with the world?))

[Cakeday]

Just wanted to mention that adding onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.stopPropagation()} to the input element, per @jjenzz's comment above, worked for me!

[mostafa-sakhiri]

Hello, this solution works for me too, but once I select an item, each time I change the input value, the input loses focus. Any idea about what causes this issue ?

[nawresncib12]

I tried something similar and it works fine but the input does not detect the spacebar onChange , it detects is onKeyDown but it's not being written and added to its value (not detected onChange) , this does not happen when the input is outside the dropdown trigger

[misha-erm]

for those who might be still looking on how to implement this pattern: cmdk plays pretty good with other radix primitives

https://codesandbox.io/p/sandbox/radix-dropdown-combobox-1x6e3k?file=%2Fsrc%2FApp.css%3A5%2C7-5%2C12

[misha-erm]

it has one known issue: autofocus doesn't really work when using mouse. But I was able to work around this with some focus locking (re-focus input onBlur if bluring back to submenu trigger with open menu)

[eldyvoon]

I'm waiting while using react-select first.

[klingat]

+1 also waiting on this!

[V-iktor]

👍

[florinkrasniqi]

+1 waiting on this!

Until then, something like this can do the job; Except for escaping input focus with keyboard navigation :|

<input
  type="text"
  className="w-full border-none py-2.5 pl-9 pr-3 text-xs font-medium leading-6 placeholder:text-grey-300 focus:ring-0"
  placeholder="Search..."
  disabled={isLoading}
  value={search}
  onChange={(e) => setSearch(e.target.value)}
  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
    e.stopPropagation()
  }
/>