Issues with keyboard navigation on KDropdownMenu

[AlexVelezLl]

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 options list, We can include dividers with a { type: "Divider" } object.
• When the user presses tab or esc, we should return the focus to the last element focused before KDropdownMenu was active. This can be done by saving the document.activeElement before 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 esc or tab is 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

1. Go to the KListWithOverflow documentation.
2. Click on the box of the last list example.
3. Navigate with the keyboard through the dropdown menu and note the issues described above.

Additional information

Compartir.pantalla.-.2024-03-25.16_22_53.mp4

[galovdev]

Can I get this assigned?

[MisRob]

Hi @galovdev, thank you for volunteering, I will assign you

[nucleogenesis]

Hello @galovdev, are you still interested in contributing on this issue? If not, we will reassign it.

[galovdev]

Hello @galovdev, are you still interested in contributing on this issue? If not, we will reassign it.

Hi, please give me this weekend, Im working on the other issue

[marcellamaki]

Thank you @galovdev - no problem. Please reach out if you have any questions.

[MisRob]

Hi @galovdev, are you still planning to work on this?