davidtheclark / davidtheclark/react-aria-menubutton
`MenuItem`: custom `onClick` not fired when `tag` is `button` and user presses enter
- 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.