[MenuLink] Immediately clicks button inside Dialog when using keyboard #811
Description
🐛 Bug report
Current Behavior
When opening a @reach/dialog from a <MenuLink as={Link}> (react-router Link) using the keyboard, any button in the modal is immediately clicked.
In Chrome, Safari, and Firefox, using the enter key causes the button to be clicked.
In Firefox, using the spacebar causes the button to be clicked.
Adding onClick={(e) => e.stopPropagation()} does not solve the issue.
Expected behavior
I would expect that activating a MenuLink with the keyboard would behave the same as clicking with the mouse, and should not trigger a click event on a button inside a modal.
Reproducible example
https://codesandbox.io/s/friendly-beaver-1n8rn?file=/src/index.js
Note that opening the modal using the mouse works fine, but using the keyboard does not show the modal. Check the console.log output to see the modal is immediately closing because the close button inside is being "clicked".
Suggested solution(s)
It seems this is being caused by calling .click() here, without first calling preventDefault on the original event.
Additional context
I'm working on a PR to address this.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Reach Package | MenuLink, Dialog | @reach/[email protected], @reach/[email protected] |
| React | 17.0.2 | |
| Browser | Chrome, Firefox, Safari | Latest? |
| Assistive tech | Keyboard | |
| Node | 14.16.1 | |
| npm/yarn | npm | 7.17.0 |
| Operating System | macOS | 11.4 |