[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.

Author: Scott Robertson

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", () => {

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);
     }