New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pressing enter key to close button closes the modal but the event is attached to opener element and reopens the modal #954
Comments
@shawnscoding This is a very weird behavior... When you hit enter to close the modal, react-modal uses the onKeyDown event to start the closing process, and, when Since you add a onKeyUp handler, when the enter is released, this handler is triggered. One fix is to change the your handler to use onKeyDown, instead of onKeyUp. |
Hi @shawnscoding, Are you still experiencing this issue or is it resolved ? |
@diasbruno Hi @PaoloJN |
Sometimes we pay the price for ctrl+c ctrl-v. 😂 If you know grep and sed or awk or comby this is a very simple problem to fix. Give this tools a try... |
@diasbruno I understand that. Thank you for your help :) If this happens to be fixed later on, please let me know. |
Try comby. It's simple and amazing refactoring tool. |
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. |
@shawnscoding I have made some changes to |
change setIsOpen(true) to setIsOpen(!modalIsOpen) in openModal |
Summary:
Steps to reproduce:
Tab
. This will focus the close buttonEnter
this closes the modal but reopens it. I know this is because of theonKeyUp
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.
The text was updated successfully, but these errors were encountered: