nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.97k stars 1.54k forks source link

[BUG] - enter or space not selecting item in dropdown #3121

Closed wingkwong closed 5 months ago

wingkwong commented 5 months ago

NextUI Version

2.4.0

Describe the bug

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. it was working on v2.2.10.

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. open dropdown, and focus on the first item
  3. press space or enter
  4. Nothing gets selected
<Dropdown>
  <DropdownTrigger>
    <Button>Trigger</Button>
  </DropdownTrigger>
  <DropdownMenu aria-label="Actions" color={color} variant={variant}>
    <DropdownItem key="new" onPress={() => console.log("NOT WORKING WITH ENTER / SPACE")}>
      New file
    </DropdownItem>
    <DropdownItem key="copy">Copy link</DropdownItem>
    <DropdownItem key="edit">Edit file</DropdownItem>
    <DropdownItem key="delete" className="text-danger" color="danger">
      Delete file
    </DropdownItem>
  </DropdownMenu>
</Dropdown>

Expected behavior

Pressing the keyboard "Enter" or "Space" should select the item.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

linear[bot] commented 5 months ago

ENG-919 [BUG] - enter or space not selecting item in dropdown

jrgarciadev commented 5 months ago

@wingkwong also, pressing escape doesn't focus the trigger back

wingkwong commented 5 months ago

pressing escape doesn't focus the trigger back

focus issue has been fixed in https://github.com/nextui-org/nextui/pull/3187