Pressing enter key to close button closes the modal but the event is attached to opener element and reopens the modal

Summary:

Steps to reproduce:

1. Visit my demo on Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js
2. Click ‘Open Modal’ button and press Tab. This will focus the close button
3. Press Enter this closes the modal but reopens it. I know this is because of the onKeyUp event listener to anchor tag but this function is needed for other purposes.

Expected behavior:

Closes modal and focus move to the opener element( in this case, anchor tag)

Link to example of issue:

Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js

Additional notes:

Is there a way to solve this issue without removing the onKeyUp event handler?

Thanks.

[diasbruno]

Try comby. It’s simple and amazing refactoring tool.

[brainsaysno]

Your issue seems to be specific to your project rather than being a package issue. +1 on refactoring to make your events onKeyDown. That solves it.