Skip to content

Commit 42d724c

Browse files
klootsdiasbruno
authored andcommitted
[added] shouldReturnFocusAfterClose to control focus.
1 parent 400ac13 commit 42d724c

File tree

3 files changed

+30
-4
lines changed

3 files changed

+30
-4
lines changed

Diff for: docs/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ import ReactModal from 'react-modal';
8484
Note: By disabling the esc key from closing the modal you may introduce an accessibility issue.
8585
*/
8686
shouldCloseOnEsc={true}
87+
/*
88+
Boolean indicating if the modal should restore focus to the element that
89+
had focus prior to its display.
90+
*/
91+
shouldReturnFocusAfterClose={true}
8792
/*
8893
String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
8994
*/

Diff for: src/components/Modal.js

+2
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default class Modal extends Component {
5454
ariaHideApp: PropTypes.bool,
5555
shouldFocusAfterRender: PropTypes.bool,
5656
shouldCloseOnOverlayClick: PropTypes.bool,
57+
shouldReturnFocusAfterClose: PropTypes.bool,
5758
parentSelector: PropTypes.func,
5859
aria: PropTypes.object,
5960
role: PropTypes.string,
@@ -71,6 +72,7 @@ export default class Modal extends Component {
7172
shouldFocusAfterRender: true,
7273
shouldCloseOnEsc: true,
7374
shouldCloseOnOverlayClick: true,
75+
shouldReturnFocusAfterClose: true,
7476
parentSelector() {
7577
return document.body;
7678
}

Diff for: src/components/ModalPortal.js

+23-4
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export default class ModalPortal extends Component {
4444
closeTimeoutMS: PropTypes.number,
4545
shouldFocusAfterRender: PropTypes.bool,
4646
shouldCloseOnOverlayClick: PropTypes.bool,
47+
shouldReturnFocusAfterClose: PropTypes.bool,
4748
role: PropTypes.string,
4849
contentLabel: PropTypes.string,
4950
aria: PropTypes.object,
@@ -137,8 +138,23 @@ export default class ModalPortal extends Component {
137138
afterClose = () => {
138139
// Remove body class
139140
bodyClassList.remove(this.props.bodyOpenClassName);
140-
focusManager.returnFocus();
141-
focusManager.teardownScopedFocus();
141+
142+
if (this.shouldReturnFocus()) {
143+
focusManager.returnFocus();
144+
focusManager.teardownScopedFocus();
145+
}
146+
};
147+
148+
shouldReturnFocus = () => {
149+
// Don't restore focus to the element that had focus prior to
150+
// the modal's display if:
151+
// 1. Focus was never shifted to the modal in the first place
152+
// (shouldFocusAfterRender = false)
153+
// 2. Explicit direction to not restore focus
154+
return (
155+
this.props.shouldFocusAfterRender ||
156+
this.props.shouldReturnFocusAfterClose
157+
);
142158
};
143159

144160
open = () => {
@@ -147,8 +163,11 @@ export default class ModalPortal extends Component {
147163
clearTimeout(this.closeTimer);
148164
this.setState({ beforeClose: false });
149165
} else {
150-
focusManager.setupScopedFocus(this.node);
151-
focusManager.markForFocusLater();
166+
if (this.shouldReturnFocus()) {
167+
focusManager.setupScopedFocus(this.node);
168+
focusManager.markForFocusLater();
169+
}
170+
152171
this.setState({ isOpen: true }, () => {
153172
this.setState({ afterOpen: true });
154173

0 commit comments

Comments
 (0)