search

vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
https://clarity.design
Other
318 stars 71 forks source link

Dropdown keyboard nav does not work inside datagrids #1361

Open TobiasPankner opened 3 months ago

TobiasPankner commented 3 months ago

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:

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

kevinbuhmann commented 3 months ago

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.