davidtheclark / davidtheclark/react-aria-menubutton

`MenuItem`: custom `onClick` not fired when `tag` is `button` and user presses enter

Open
#131 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
452
Forks
76
PR merge metrics
No merged PRs in 30d

Description

Reduced test case: https://stackblitz.com/edit/react-ts-sbkech?file=index.tsx

If you open the menu, focus the `a`, and then press enter, the custom `onClick` handler is fired as seen from the logs. ✅

If you open the menu, focus the `button`, and then press enter, the custom `onClick` handler is _not_ fired as seen from the logs. ❌

I would expect `onClick` to work when the user presses enter on a `button`, just like how it works on an `a`.

My understanding of what is happening here:

- `MenuItem` [has some code that will `preventDefault`](https://github.com/davidtheclark/react-aria-menubutton/blob/a0c0115607e9b14fcb506752c16cba6bb545596f/src/MenuItem.js#L27-L28) inside the `keydown` event if this condition is not met: `this.props.tag === 'a' && this.props.href`
- therefore, in this case where `tag` is `button`, it will `preventDefault`
- therefore there will be no `click` event after the `keydown` event finishes

Note: `onClick` is called if you actually click, as opposed to using the enter key.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.