[added] a preventScroll prop

to allows the modal to optionally use a preventScroll
flag when focusing the element that had focus
prior to display of the modal.

Author: cameracker

docs/index.md

@@ -79,9 +79,9 @@ import ReactModal from 'react-modal';
 
   bodyOpenClassName={
     "ReactModal__Body--open"
-  /* String className to be applied to the document.body 
+  /* String className to be applied to the document.body
      (must be a constant string).
-     This attribute when set as `null` doesn't add any class 
+     This attribute when set as `null` doesn't add any class
      to document.body.
      See the `Styles` section for more details. */}
 
@@ -121,6 +121,11 @@ import ReactModal from 'react-modal';
      to be applied if desired.
      This attribute is `dialog` by default. */}
 
+  preventScroll={
+    false
+  /* Boolean indicating if the modal should use the preventScroll flag when
+     restoring focus to the element that had focus prior to its display. */}
+
   parentSelector={
     () => document.body
   /* Function that will be called to get the parent element
@@ -136,7 +141,7 @@ import ReactModal from 'react-modal';
   data={
     { background: "green" }
   /* Additional data attributes (optional). */}
-  
+
   testId={
     ""
   /* String testId that renders a data-testid attribute in the DOM,

specs/Modal.spec.js

@@ -51,6 +51,7 @@ export default () => {
     props.closeTimeoutMS.should.be.eql(0);
     props.shouldFocusAfterRender.should.be.ok();
     props.shouldCloseOnOverlayClick.should.be.ok();
+    props.preventScroll.should.be.false();
     ReactDOM.unmountComponentAtNode(node);
     ariaAppHider.resetForTesting();
     Modal.setAppElement(document.body); // restore default

src/components/Modal.js

@@ -60,6 +60,7 @@ class Modal extends Component {
     shouldFocusAfterRender: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
     shouldReturnFocusAfterClose: PropTypes.bool,
+    preventScroll: PropTypes.bool,
     parentSelector: PropTypes.func,
     aria: PropTypes.object,
     data: PropTypes.object,
@@ -82,6 +83,7 @@ class Modal extends Component {
     shouldCloseOnEsc: true,
     shouldCloseOnOverlayClick: true,
     shouldReturnFocusAfterClose: true,
+    preventScroll: false,
     parentSelector: () => document.body
   };
 

src/components/ModalPortal.js

@@ -51,6 +51,7 @@ export default class ModalPortal extends Component {
     shouldFocusAfterRender: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
     shouldReturnFocusAfterClose: PropTypes.bool,
+    preventScroll: PropTypes.bool,
     role: PropTypes.string,
     contentLabel: PropTypes.string,
     aria: PropTypes.object,
@@ -185,7 +186,7 @@ export default class ModalPortal extends Component {
 
     if (this.props.shouldFocusAfterRender) {
       if (this.props.shouldReturnFocusAfterClose) {
-        focusManager.returnFocus();
+        focusManager.returnFocus(this.props.preventScroll);
         focusManager.teardownScopedFocus();
       } else {
         focusManager.popWithoutFocus();

src/helpers/focusManager.js

@@ -34,12 +34,12 @@ export function markForFocusLater() {
 }
 
 /* eslint-disable no-console */
-export function returnFocus() {
+export function returnFocus(preventScroll = false) {
   let toFocus = null;
   try {
     if (focusLaterElements.length !== 0) {
       toFocus = focusLaterElements.pop();
-      toFocus.focus();
+      toFocus.focus({ preventScroll });
     }
     return;
   } catch (e) {