search

theKashey / react-focus-on

🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for
MIT License
336 stars 14 forks source link

Keydown event incorrectly triggered on children #36

Closed narehart closed 1 year ago

narehart commented 4 years ago

If an onKeyDown handler causes FocusOn to render and the first focusable element has an onKeyUp or onClick handler, that handler will also be called.

Reproduced here: https://codesandbox.io/s/wizardly-vaughan-2y8in Doesn't happen when focusing using refs: https://codesandbox.io/s/naughty-curie-kmmu8

theKashey commented 4 years ago

The funny thing - it's working that way only for Enter, not for Space.

narehart commented 4 years ago

Maybe that's because of the way React handles onClick handlers. They are also triggered by the Enter key. My guess is this uses the keyup event under the hood. So I think what's happening here is the onKeyDown opens FocusOn which moves focus to the button and then when the key is released the onClick or onKeyUp event is fired which both use keyup.

narehart commented 4 years ago

If I defer rendering of the onFocus to the end of the event loop it doesn't trigger the onClick handler: https://codesandbox.io/s/divine-flower-jq4rn

theKashey commented 4 years ago

Let me create issue for React then. It shall not be solved here.

stale[bot] commented 1 year ago

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.