Keyboard interactions not working on dropdown combobox ⌨️

[ramiAbdou]

Description

This has been an issue for quite a while and this affects all dropdown components - we currently don't have accessible dropdowns that support keyboard interactions.

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to /resources/add.
2. Click on the "Tags" input box.
3. With the dropdown open, try to move up/down with your keyboard.
4. It doesn't work.

Expected Behavior

A user should be able to navigate with their keyboard.

Additional Context

This will require a working in our underlying ui package, specifically the ComboboxPopover and Dropdown components. I'm interested in what Radix has to offer with their DropdownMenu component, instead of building this in-house.

[ayoaru]

Was thinking of using a dropdown box for #216 , I could take a look at this if by the time it becomes relevant someone else hasn't picked it up?

[hebronmekuria]

Happy to pick this up too :)

[tomas-salgado]

You've got it! @hebronmekuria

[hebronmekuria]

Progress: so far, it seems that making the dropdown menu's into Radix components doesn't work because the children props are not the right type (they need to be DropDown.Item). Just wanted to make this update, will wrap up soon.

[hebronmekuria]

@tomas-salgado I have a question...
To incorporate Radix's dropdown menu, I have made the original dropdown class to return <DropdownMenu.Root> and all the children that come after it in order to render the Dropdown. I also casted all the children of the dropdown to be on type DropdownMenu.Item.
However, I tried to set the trigger button up as a prop to Dropdown class, which wasn't ideal, because that involved making adjustments to all the files in which Dropdown is imported, and passing the trigger buttons as props. However, the trigger still doesn't work, when I click the trigger button, nothing happens.
Here are some of my assumptions:
-The interactions with the combobox-popover is causing this. I understand that the dropdown is nested within in (or vice versa?) and whatever trigger is used is supposed to initiated both items.
-The context provider is clashing with a possible trigger,
I have been stuck on this for two days, so I'm curious as to what you might think is going on as well as your feedback on how I have gone about changing up dropdown.tsx so far. Thanks!

[hebronmekuria]

I haven't made any relevant changes to combobox-popover yet, just trying to figure out what here is triggering the button and why I can't use Radix's DropdownMenu.Trigger properly.

[tomas-salgado]

@hebronmekuria thanks for the update! I'm going to take a closer look at this tomorrow, but yeah it'd be great if you could put up a PR with what you already have. No worries if there are bugs so far, just put it as a draft PR and we'll work through it!

[hebronmekuria]

PR is up! I'm not good with frontend, so let me know if I'm completely off base or what tips you have to figuring out the trigger issue!😁 @tomas-salgado

[tomas-salgado]

Hey @hebronmekuria, sorry for the delay with this. I've been trying to investigate further but I haven't been able to figure out the issue yet (frontend is also not my forte 😅 ). I'll connect with Rami on this when he's back and he should have more insight on how to proceed

[wflore19]

Someone from Supabase implemented a MultiCombobox w/ keyboard support.

demo: https://supabase-design-system.vercel.app/design-system/docs/fragments/multi-select#badge-combo-box
source code: https://github.com/supabase/supabase/blob/master/packages/ui-patterns/multi-select/multi-select.tsx