[BUG] - DropdownItem not getting focused properly and 'Enter' | 'Space' not selecting the item.

[matheusboeira]

NextUI Version

2.3.5

Describe the bug

When you focus on the DropdownTrigger, the next step is to press "space" to open the Dropdown. When you press it, you should focus on the first item in the list. Well, that doesn't happen. Furthermore, when you focus on the DropdownItem (after pressing tab until it gets focused), and then press Enter or Space, it closes without selecting the item.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Go to a page that has Dropdown and other components
2. Use Tab to localize the Dropdown and press Space
3. The Dropdown first item doesn't get focused
4. Tab until you focus Dropdown first item
5. Use keyboard arrow up|down to select an item and press space
6. Nothing gets selected

Expected behavior

As a user, I would like that when pressing the keyboard "space" while the Dropdown is focused, it focuses on the Dropdown items. Furthermore, pressing the keyboard "Enter" or "Space" should select the item.

Screenshots or Videos

Screen.Recording.2024-04-24.at.02.59.13.mov

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-726 [BUG] - DropdownItem not getting focused properly and 'Enter' | 'Space' not selecting the item.

[wingkwong]

Please share the code also.

[matheusboeira]

@wingkwong it's reproducible here: code. It doesn't work only in keyboard. Try to select an item using keyboard.

[wingkwong]

@matheusboeira you need to set onKeyDown={() => setLanguage(lang.code)}. OnPress only captures press event only.

[matheusboeira]

@wingkwong, hmm. But I want to change the language after I press the "space" in my keyboard, not on arrow keys. And what about the tabIndex? I want to focus Dropdown first item when DropdownTrigger is open (after pressing space).

Version 2.2.10 works as expected. Pressing "Space" opens Dropdown and focus the first item. Items can be "selected" pressing space.

[wingkwong]

@matheusboeira oh ok. I misunderstood the problem.

As a user, I would like that when pressing the keyboard "space" while the Dropdown is focused, it focuses on the Dropdown items.

This seems missing indeed.

Furthermore, pressing the keyboard "Enter" or "Space" should select the item.

To set the language, here we still need onKeyDown={() => setLanguage(lang.code)}

[matheusboeira]

@wingkwong exactly the same code works as expected in version 2.2.10. Pressing "Space" opens Dropdown and focus the first item. Items can be "selected" (change the language) pressing space.

[wingkwong]

@matheusboeira can you confirm the following behaviours in 2.2.10?

• use tab to localize the dropdown trigger
• press space, dropdown is open and the first item is focused
• press space again, first item is selected and language is changed (i.e. setLanguage)

[matheusboeira]

@wingkwong, yes! It should be like that!

Screen.Recording.2024-04-25.at.03.23.03.mov

[wingkwong]

@matheusboeira Thanks a lot. much cleaner. will take a look.

[4Furki4]

I had the same problem but it seems it was fixed, just saying to confirm the bug fix ^_^