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( + + + + (nestedModal = el)} appElement={node} a isOpen> + + + + , + 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); }