[added] Don't focus after render if we don't want to

Author: imadha

docs/README.md

@@ -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: {} }}
@@ -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
   */

specs/Modal.spec.js

@@ -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();
@@ -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();

src/components/Modal.js

@@ -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,
@@ -65,6 +66,7 @@ export default class Modal extends Component {
     bodyOpenClassName,
     ariaHideApp: true,
     closeTimeoutMS: 0,
+    shouldFocusAfterRender: true,
     shouldCloseOnOverlayClick: true,
     parentSelector() { return document.body; }
   };

src/components/ModalPortal.js

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