-
Notifications
You must be signed in to change notification settings - Fork 810
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
Stacked/nested modals have focus lost in Safari #801
Comments
I ran into similar issues the past few days.
A tab event on the inner modal will be bubbled up by react to the outer modal as well, and cause a If you can structure your modals to not be nested I think this issue does not occur. However, this is not always feasible (nor is it for us):
I think putting an |
Fixes reactjs#801 If the `keydown` event within the currently-open, nested modal is propagated, Safari will toggle focus between the parent modal's focusable elements instead.
Fixes reactjs#801 If the `keydown` event within the currently-open, nested modal is propagated, Safari will toggle focus between the parent modal's focusable elements instead.
Fixes reactjs#801 If the `keydown` event within the currently-open, nested modal is propagated, Safari will toggle focus between the parent modal's focusable elements instead.
The fix mentioned by @pleunv worked for me and I've opened a PR to prevent propagation on that event. I was noticing other focus issues in Safari such as the nested modal's content div losing focus after the modal opens, but it seems to be a separate issue that I haven't managed to track down yet. |
Summary:
When nested Modal elements are open, focus behaves strangely in Safari. I believe that the behavior is that any tab or shift-tab will cause focus to elements in the outermost modal, not in the inner (top) modal.
Steps to reproduce:
Using Safari 13.1.
Here's a minimal repro case: https://codesandbox.io/s/distracted-napier-s7b57
Expected behavior:
I'd expect the focus lock to prevent focus from leaving the innermost modal. This is how it works in Chrome and Firefox (I have not verified behavior in IE/Edge).
Link to example of issue:
Minimal repro case: https://codesandbox.io/s/distracted-napier-s7b57
Additional notes:
The text was updated successfully, but these errors were encountered: