vmware-clarity/ng-clarity

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:

  1. Place a clr-dropdown somewhere inside of clr-datagrid
  2. Open the dropdown menu
  3. 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.