Skip to content

Commit

Permalink
[added] Don't focus after render if we don't want to
Browse files Browse the repository at this point in the history
  • Loading branch information
imadha authored and diasbruno committed Sep 5, 2017
1 parent 2adb45d commit 93256e9
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 4 deletions.
6 changes: 5 additions & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import ReactModal from 'react-modal';
*/
closeTimeoutMS={0}
/*
Object indicating styles to be used for the modal.
Object indicating styles to be used for the modal.
It has two keys, `overlay` and `content`. See the `Styles` section for more details.
*/
style={{ overlay: {}, content: {} }}
Expand Down Expand Up @@ -70,6 +70,10 @@ import ReactModal from 'react-modal';
Boolean indicating if the appElement should be hidden
*/
ariaHideApp={true}
/*
Boolean indicating if the modal should be focused after render
*/
shouldFocusAfterRender={true}
/*
Boolean indicating if the overlay should close the modal
*/
Expand Down
8 changes: 7 additions & 1 deletion specs/Modal.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ describe('State', () => {
expect(props.isOpen).toBe(false);
expect(props.ariaHideApp).toBe(true);
expect(props.closeTimeoutMS).toBe(0);
expect(props.shouldFocusAfterRender).toBe(true);
expect(props.shouldCloseOnOverlayClick).toBe(true);
ReactDOM.unmountComponentAtNode(node);
ariaAppHider.resetForTesting();
Expand Down Expand Up @@ -131,11 +132,16 @@ describe('State', () => {
}, closeTimeoutMS);
});

it('focuses the modal content', () => {
it('focuses the modal content by default', () => {
const modal = renderModal({ isOpen: true }, null);
expect(document.activeElement).toBe(mcontent(modal));
});

it('does not focus the modal content when shouldFocusAfterRender is false', () => {
const modal = renderModal({ isOpen: true, shouldFocusAfterRender: false }, null);
expect(document.activeElement).toNotBe(mcontent(modal));
});

it('give back focus to previous element or modal.', done => {
function cleanup () {
unmountModal();
Expand Down
2 changes: 2 additions & 0 deletions src/components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default class Modal extends Component {
onRequestClose: PropTypes.func,
closeTimeoutMS: PropTypes.number,
ariaHideApp: PropTypes.bool,
shouldFocusAfter: PropTypes.bool,
shouldCloseOnOverlayClick: PropTypes.bool,
parentSelector: PropTypes.func,
aria: PropTypes.object,
Expand All @@ -65,6 +66,7 @@ export default class Modal extends Component {
bodyOpenClassName,
ariaHideApp: true,
closeTimeoutMS: 0,
shouldFocusAfterRender: true,
shouldCloseOnOverlayClick: true,
parentSelector() { return document.body; }
};
Expand Down
5 changes: 3 additions & 2 deletions src/components/ModalPortal.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default class ModalPortal extends Component {
onAfterOpen: PropTypes.func,
onRequestClose: PropTypes.func,
closeTimeoutMS: PropTypes.number,
shouldFocusAfterRender: PropTypes.bool,
shouldCloseOnOverlayClick: PropTypes.bool,
role: PropTypes.string,
contentLabel: PropTypes.string,
Expand Down Expand Up @@ -105,8 +106,8 @@ export default class ModalPortal extends Component {
clearTimeout(this.closeTimer);
}

setFocusAfterRender = focus => {
this.focusAfterRender = focus;
setFocusAfterRender = (focus) => {
this.focusAfterRender = this.props.shouldFocusAfterRender && focus;
}

setOverlayRef = (overlay) => {
Expand Down

0 comments on commit 93256e9

Please sign in to comment.