Merge 26e9739 into 827796d

docs/index.md

@@ -100,6 +100,22 @@ import ReactModal from 'react-modal';
     true
   /* Boolean indicating if the modal should be focused after render. */}
 
+  disableFocusTrap={
+    false
+  /*
+    Boolean indicating if the modal should allow focus to leave the modal when it's visible.
+    If you set this flag to true, it's likely that you'll want to set disableTabTrap=true also,
+    to allow focus to leave the modal using the tab button.
+  */}
+
+  disableTabTrap={
+    true
+  /*
+    Boolean indicating if the modal should allow focus to leave the modal using the tab key.
+    If you set this flag to true, it's likely that you'll want to set disableFocusTrap=true also,
+    because otherwise the focus will be prevented from leaving the component.
+  */}
+
   shouldCloseOnOverlayClick={
     true
   /* Boolean indicating if the overlay should close the modal */}

specs/Modal.events.spec.js

@@ -109,6 +109,25 @@ export default () => {
     });
   });
 
+
+  it("does NOT keep focus inside the modal when child has no tabbable elements and disableTabTrap === true", () => {
+    let tabPrevented = false;
+    const props = {
+      isOpen: true,
+      disableTabTrap: true,
+    }; 
+    withModal(props, "hello", modal => {
+      const content = mcontent(modal);
+      document.activeElement.should.be.eql(content);
+      tabKeyDown(content, {
+        preventDefault() {
+          tabPrevented = true;
+        }
+      });
+      tabPrevented.should.be.eql(false);
+    });
+  });
+
   describe("shouldCloseOnEsc", () => {
     context("when true", () => {
       it("should close on Esc key event", () => {

src/components/ModalPortal.js

@@ -59,6 +59,8 @@ export default class ModalPortal extends Component {
     shouldFocusAfterRender: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
     shouldReturnFocusAfterClose: PropTypes.bool,
+    disableFocusTrap: PropTypes.bool,
+    disableTabTrap: PropTypes.bool,
     preventScroll: PropTypes.bool,
     role: PropTypes.string,
     contentLabel: PropTypes.string,
@@ -273,7 +275,7 @@ export default class ModalPortal extends Component {
   };
 
   handleKeyDown = event => {
-    if (event.keyCode === TAB_KEY) {
+    if (event.keyCode === TAB_KEY && !this.props.disableTabTrap) {
       scopeTab(this.content, event);
     }
 

src/helpers/bodyTrap.js

@@ -53,7 +53,9 @@ function bodyTrap(eventType, openInstances) {
 
   instances = openInstances;
 
-  if (instances.length > 0) {
+  const trapFocus = instances.find(({ props }) => !props.disableFocusTrap);
+
+  if (trapFocus && instances.length > 0) {
     // Add focus trap
     if (document.body.firstChild !== before) {
       document.body.insertBefore(before, document.body.firstChild);