[BUG] - onClick handler is not triggered by keyboard

[Inbestigator]

NextUI Version

2.4.2 and @nextui-org/button@2.0.34

Describe the bug

onClick handler is not triggered when activating <Button> with keyboard.
This behavior isn't unique to buttons and happens on some other components (checkbox, switch)

Your Example Website or App

https://broken-nextui-components.vercel.app/
Source code for example: https://github.com/Inbestigator/broken-nextui-components

Steps to Reproduce the Bug or Issue

1. Go to any page with component.
2. Set focus on (for example, by tabbing).
3. Press Spacebar or Enter key.
4. onClick handler is not triggered, however button shows ":active" state.

Expected behavior

onClick handler is triggered as it normally happens for <button> element in React.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome and Firefox

[linear]

ENG-1079 [BUG] - <Button> onClick handler is not triggered by keyboard

[abhisektomar1]

I am working on it.

[abhinandan-verma]

NextUI Version

2.4.2 and @nextui-org/button@2.0.34

Describe the bug

onClick handler is not triggered when activating <Button> with keyboard. This behavior isn't unique to buttons and happens on some other components (checkbox, switch)

Your Example Website or App

https://broken-nextui-components.vercel.app/ Source code for example: https://github.com/Inbestigator/broken-nextui-components

Steps to Reproduce the Bug or Issue

1. Go to any page with component.
2. Set focus on (for example, by tabbing).
3. Press Spacebar or Enter key.
4. onClick handler is not triggered, however button shows ":active" state.

Expected behavior

onClick handler is triggered as it normally happens for <button> element in React.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome and Firefox

The Bug is very simple to solve,
you have used onClick() method, which requires element to be clicked, that is why no action on hitting Enter/ Space key

 <Button onClick={() => alert("Clicked")}>Button</Button>

You need to use onPress() method, which support key presses, hence for action through keyboard key

Use this

 <Button onPress={() => alert("Clicked")}>Button</Button>

I hope this resolves the issue.

[abhisektomar1]

onPress in not available for web it is generally used in react native.
We have to use onKeyDown and then check for Enter Key event

[abhisektomar1]

@wingkwong this is generally occuring in every component do you want me to change it for every component. or how do you want me to proceed.

[wingkwong]

@Inbestigator onClick has been deprecated. Please use onPress instead. You can refer to this example. It works with keyboard and it is using onPress.

@abhisektomar1 Your statement is not correct. We do support onPress and other press events.

For those who wonder why onPress is preferred than onClick, please check out this blog. "standard" HTML specifications are actually broken across platforms as Mobile devices.