From 93256e92b5452aa2242b2f75f7b9068d297c8750 Mon Sep 17 00:00:00 2001
From: imadha <imadha@slack-corp.com>
Date: Fri, 1 Sep 2017 00:10:47 -0700
Subject: [PATCH] [added] Don't focus after render if we don't want to

---
 docs/README.md                | 6 +++++-
 specs/Modal.spec.js           | 8 +++++++-
 src/components/Modal.js       | 2 ++
 src/components/ModalPortal.js | 5 +++--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 1094f86b..d75ebd1c 100644
--- a/docs/README.md
+++ b/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
   */
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index e8327c3c..2527d1d7 100644
--- a/specs/Modal.spec.js
+++ b/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();
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 0786f355..7dff8091 100644
--- a/src/components/Modal.js
+++ b/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; }
   };
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index f77b9cc3..c2949ae8 100644
--- a/src/components/ModalPortal.js
+++ b/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) => {