Accessibility in multiple Dropdown components within a DataTable

[Geodegeorge]

Hi all, I'm working on fixing an accessibility issue on my app where the drop-downs are not accessible by keyboard.

I am using a standard DataTable component, and on each table row there is a Dropdown component (all PrimeReact components). The issue is; when I have multiple rows in the table, I can focus on a given dropdown, then I can press space to expand the option panel, but when I use the arrow keys to select an option, the focus skips to a different row in the table and the option panel remains expanded. This behaviour is not present when there is a single row in the table because there is not another row to focus on.

I am aware that the DataTable component has the baked in accessibility feature of being able to navigate up / down the table with the arrow keys, so I'm assuming that this DataTable behaviour is overriding the focus on each option of my dropdown.

Does anyone have a suggestion on how I can make my Dropdowns accessible? I have tried so many tweaks, and I'm wanting a solid way to resolve this

[Geodegeorge]

Can anyone help me please?

[tanerengiiin]

You're right about the cause. The table shouldn't be handling arrow keys while a dropdown is open, so that's a bug on our end, not something you should have to work around.

Got it reproduced, looking at it now. Will update here. Thanks.