-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Modal Component: Up / Down Keys close modal spawned from editor canvas #22940
Comments
This works well for me! At the same time, I'm wondering if turning the modal into a single (global) instance wouldn't fix and possibly prevent issues like this? We already control its visibility via a global state. We could also use |
@WunderBart Using a single global instance makes sense to me. That's a pattern I'm used to seeing. I assume this was considered when the component was being built, so it would be interesting to know the context of how the Modal was built. |
This would likely be fixed by #19879. |
Maybe related: #18537 (for the modals part). Also to verify if this happens only with Safari + VoiceOver. |
I just tried on trunk and can't reproduce this. I tried with both the iframed and non-iframed canvas. I don't know what changed but it seems focus does not escape the modal any more when using the arrow keys. |
Thanks for testing it again, @stokesman! I can't reproduce it either. |
KeyPress events from the modal on the editor canvas are bubbling to editor. This means that when you press the up or down arrow keys:
To reproduce
You can see this by trying to resolve a broken block within the editor canvas.
<p> <p>Text</p>
Expected behavior
The modal should only be closed Escape keypress. Other keypresses should not bubble outside the modal. Global keypresses should still be able to be used, like Save (command + s).
Potential Solution
I'm not sure if this has unintended consequences, but adding a
e.stopPropagation()
at the end of the modal keydown handler, it seems to work to block the arrow keys from closing the modal while still a blocking Up/Down from closing the modal.https://github.com/WordPress/gutenberg/blob/master/packages/components/src/modal/frame.js#L57-L61
The text was updated successfully, but these errors were encountered: