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 ?

[omtita-everag]

From the source code, It seems like the issue with the typeahead function of the component conflicting with the input's event.

[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()
  }
/>

[mohamed-moubarak]

Try adding the following condition

onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
    if (e.key !== 'Escape') {
       e.stopPropagation();
     }
  }

[ankormoreankor]

Hi guys!
We also need this feature in our platform.
I really like your lib, it covers most of our cases and it works very well 💛
Currently, I'm going to try this approach - https://ariakit.org/examples/combobox-radix-select - but seems like I have to add the whole new lib in our project

[ankormoreankor]

Well, I've tried to implement this approach to DropdownMenu, and it didn't work for me: once I type a symbol, the popup closes, and autofocus is not working either(

[ankormoreankor]

Unfortunately, none of the approaches from this thread worked for me🫤

[eldyvoon]

Just use react-select

…

On Wed, Aug 7, 2024, 6:03 PM Drew ***@***.***> wrote: Unfortunately, none of the approaches from this thread worked for me🫤 — Reply to this email directly, view it on GitHub <#787 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVKVHLIAIDQ7DDACVNPCJLZQHWI3AVCNFSM5ATNYRF2U5DIOJSWCZC7NNSXTOSENFZWG5LTONUW63SDN5WW2ZLOOQ5TCMBSGYZDQMBT> . You are receiving this because you commented.Message ID: ***@***.***>

[ankormoreankor]

I'm thinking of using Downshift to write my own solution
As I understand, react-select is not a headless component, correct?

[rutpshah]

If anyone still searching for answer and want to stick with Radix UI then Use https://www.radix-ui.com/primitives/docs/components/menubar. Use menu items as dropdown items and change flex direciton as column. Add additional css modifications to make it look like dropdown.

Use side prop with value as right in Menubar content.

Push all this inside a popover along with search box.

[eszthoff]

Hello. Thanks for the enlightening discussion here. I have a different use case, where I want to have an input field inside a dropdown, no for filtering, but to add an new option. I think that's should be a legitimate usecase here, isn't it?

I managed to add the input into the dropdown and make sure focus stays there while typing. However, I'm struggling to make both keyboard and mouse interaction work.

Keyboard navigation works with the following structure, but when the input it clicked, the dropdown is dismissed.

        <DropdownMenu.Root>
            <DropdownMenu.Trigger>Apply tags</DropdownMenu.Trigger>
            <DropdownMenu.Portal>
                <DropdownMenu.Content>
                    <DropdownMenu.Item asChild>
                        <input
                            type="text"
                            tabIndex={0}
                            onKeyDown={(e) => {
                                e.stopPropagation();
                            }}
                            placeholder="Create new..."
                            onChange={(e) => {
                                console.log('input change with e:', e);
                            }}
                            onClick={(e) => e.stopPropagation()}
                            onSelect={(e) => e.preventDefault()}
                        />
                    </DropdownMenu.Item>
                </DropdownMenu.Content>
            </DropdownMenu.Portal>
        </DropdownMenu.Root>

In the following example mouse interaction is as expected, but I cannot get focus on the input with the keyboard at all.

        <DropdownMenu.Root>
            <DropdownMenu.Trigger>Apply tags</DropdownMenu.Trigger>
            <DropdownMenu.Portal>
                <DropdownMenu.Content>
                        <input
                            type="text"
                            tabIndex={0}
                            onKeyDown={(e) => {
                                e.stopPropagation();
                            }}
                            placeholder="Create new..."
                            onChange={(e) => {
                                console.log('input change with e:', e);
                            }}
                            onClick={(e) => e.stopPropagation()}
                            onSelect={(e) => e.preventDefault()}
                        />
                </DropdownMenu.Content>
            </DropdownMenu.Portal>
        </DropdownMenu.Root>

Any advise?

[eszthoff]

For anyone else looking here... It was a mistake in the onClick handler. It should call e.PreventDefault() not e.stopProoagation(). With that change, our first example (<DropdownMenu.Item asChild><Input/></DropdownMenu.Item asChild> works as expected.

An other thing I didn't see in the notes, is that we need to forwardRef in case we use our own component here. E.g. we want to set focus on the input field when the popup opens via ref, we had to sure the ref is forwarded correctly.