From 6dcc20b03a0216a899de6f2e9609d342e9f2e144 Mon Sep 17 00:00:00 2001
From: Scott Robertson <srobertson@dropbox.com>
Date: Tue, 8 Mar 2022 10:29:36 -0800
Subject: [PATCH] [fixed] stacked/nested modals have focus lost in Safari

Fixes #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.
---
 specs/Modal.events.spec.js    | 24 ++++++++++++++++++++++++
 src/components/ModalPortal.js |  1 +
 2 files changed, 25 insertions(+)

diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js
index 0e61c1bf..96d13c84 100644
--- a/specs/Modal.events.spec.js
+++ b/specs/Modal.events.spec.js
@@ -109,6 +109,30 @@ export default () => {
     });
   });
 
+  it("shifts focus within nested modals", () => {
+    withElementCollector(() => {
+      let nestedModal;
+      const props = { isOpen: true };
+      const node = createHTMLElement("div");
+
+      ReactDOM.render(
+        <Modal {...props} appElement={node}>
+          <button>Outer Button 1</button>
+          <button>Outer Button 2</button>
+          <Modal ref={el => (nestedModal = el)} appElement={node} a isOpen>
+            <button id="foo">Button One</button>
+            <button id="bar">Button Two</button>
+          </Modal>
+        </Modal>,
+        node
+      );
+      const content = mcontent(nestedModal);
+      tabKeyDown(content, { shiftKey: true });
+      document.activeElement.textContent.should.be.eql("Button Two");
+      ReactDOM.unmountComponentAtNode(node);
+    });
+  });
+
   describe("shouldCloseOnEsc", () => {
     context("when true", () => {
       it("should close on Esc key event", () => {
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index 35e9837e..5669f9ca 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -275,6 +275,7 @@ export default class ModalPortal extends Component {
 
   handleKeyDown = event => {
     if (event.keyCode === TAB_KEY) {
+      event.stopPropagation();
       scopeTab(this.content, event);
     }