Dropdown keyboard nav does not work inside datagrids
TobiasPankner opened this issue · 1 comments
Describe the bug
Keyboard navigation between dropdown-items (arrow up/down) does not work when the dropdown is inside a datagrid.
Datagrid elements are focused instead.
How to reproduce
https://stackblitz.com/edit/clarity-15-broken-dropdown-keyboard-nav-vmjztp
Steps to reproduce the behavior:
- Place a clr-dropdown somewhere inside of clr-datagrid
- Open the dropdown menu
- Try to navigate with arrow keys
Expected behavior
The arrow keys should switch around between the dropdown menu items
Versions
Clarity version:
- v13.x: not tested
- v15.x
- Other:
Framework version:
Angular 15
Device:
Reproducible on chrome with Angular 15
Additional notes
Workaround directive:
https://stackblitz.com/edit/clarity-15-broken-dropdown-keyboard-nav-workaround
You put a component with arrow key navigation inside another component with arrow key navigation. This is difficult to manage in code and is confusing to users as well as assistive technology. We would recommend finding a more concise UX that does not nest these components.