Issues with keyboard navigation on KDropdownMenu #588
Description
Product
Noted in Studio, and in the KDS Docs on the last example of KListWithOverflow.
Expected behavior
Two things are not working very well right now:
- When the list has dividers, the keyboard navigation should ignore them and focus on the next or previous item in the list.
- In the
optionslist, We can include dividers with a{ type: "Divider" }object.
- In the
- When the user presses
taboresc, we should return the focus to the last element focused before KDropdownMenu was active. This can be done by saving thedocument.activeElementbefore focusing the first option of the dropdown menu.
Actual behavior
- Right now, the focus doesn't change when there are dividers and we want to focus the next item, and we can't jump the dividers.
- As KDropdownMenu is rendered in the body element, when
escortabis pressed, the focus returns to the first focusable element on the document after a second. But before the focus returns to the body, the next option in the menu is focused, and after a second, the menu closes, which is a bit misleading since, at first, it seems that we could navigate through the menu with a tab.
Steps to reproduce the issue
- Go to the KListWithOverflow documentation.
- Click on the box of the last list example.
- Navigate with the keyboard through the dropdown menu and note the issues described above.