Skip to content

Commit

Permalink
[fixed] stacked/nested modals have focus lost in Safari
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Scott Robertson committed Mar 8, 2022
1 parent 68af7ec commit 6dcc20b
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 0 deletions.
24 changes: 24 additions & 0 deletions specs/Modal.events.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down
1 change: 1 addition & 0 deletions src/components/ModalPortal.js
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ export default class ModalPortal extends Component {

handleKeyDown = event => {
if (event.keyCode === TAB_KEY) {
event.stopPropagation();
scopeTab(this.content, event);
}

Expand Down

0 comments on commit 6dcc20b

Please sign in to comment.