fix(Modal): add keyboard trap

src/components/Modal/Modal.js

@@ -5,6 +5,12 @@ import { iconClose } from 'carbon-icons';
 import Icon from '../Icon';
 import Button from '../Button';
 
+const matchesFuncName =
+  typeof Element !== 'undefined' &&
+  ['matches', 'webkitMatchesSelector', 'msMatchesSelector'].filter(
+    name => typeof Element.prototype[name] === 'function'
+  )[0];
+
 export default class Modal extends Component {
   static propTypes = {
     children: PropTypes.node,
@@ -25,6 +31,7 @@ export default class Modal extends Component {
     onSecondarySubmit: PropTypes.func,
     danger: PropTypes.bool,
     shouldSubmitOnEnter: PropTypes.bool,
+    selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
   };
 
   static defaultProps = {
@@ -36,10 +43,38 @@ export default class Modal extends Component {
     iconDescription: 'close the modal',
     modalHeading: '',
     modalLabel: '',
+    selectorsFloatingMenus: [
+      '.bx--overflow-menu-options',
+      '.bx--tooltip',
+      '.flatpickr-calendar',
+    ],
   };
 
   button = React.createRef();
 
+  elementOrParentIsFloatingMenu = target => {
+    if (target && typeof target.closest === 'function') {
+      return this.props.selectorsFloatingMenus.some(selector =>
+        target.closest(selector)
+      );
+    } else {
+      // Alternative if closest does not exist.
+      while (target) {
+        if (typeof target[matchesFuncName] === 'function') {
+          if (
+            this.props.selectorsFloatingMenus.some(selector =>
+              target[matchesFuncName](selector)
+            )
+          ) {
+            return true;
+          }
+        }
+        target = target.parentNode;
+      }
+      return false;
+    }
+  };
+
   handleKeyDown = evt => {
     if (evt.which === 27) {
       this.props.onRequestClose();
@@ -50,11 +85,27 @@ export default class Modal extends Component {
   };
 
   handleClick = evt => {
-    if (this.innerModal && !this.innerModal.contains(evt.target)) {
+    if (
+      this.innerModal &&
+      !this.innerModal.contains(evt.target) &&
+      !this.elementOrParentIsFloatingMenu(evt.target)
+    ) {
       this.props.onRequestClose();
     }
   };
 
+  handleBlur = evt => {
+    // Keyboard trap
+    if (
+      this.innerModal &&
+      this.props.open &&
+      (!evt.relatedTarget || !this.innerModal.contains(evt.relatedTarget)) &&
+      !this.elementOrParentIsFloatingMenu(evt.relatedTarget)
+    ) {
+      this.focusModal();
+    }
+  };
+
   componentDidUpdate(prevProps) {
     if (!prevProps.open && this.props.open) {
       this.beingOpen = true;
@@ -63,6 +114,12 @@ export default class Modal extends Component {
     }
   }
 
+  focusModal = () => {
+    if (this.outerModal) {
+      this.outerModal.focus();
+    }
+  };
+
   focusButton = () => {
     if (this.button) {
       this.button.current.focus();
@@ -95,6 +152,7 @@ export default class Modal extends Component {
       iconDescription,
       primaryButtonDisabled,
       danger,
+      selectorsFloatingMenus, // eslint-disable-line
       ...other
     } = this.props;
 
@@ -167,6 +225,7 @@ export default class Modal extends Component {
         {...other}
         onKeyDown={this.handleKeyDown}
         onClick={this.handleClick}
+        onBlur={this.handleBlur}
         className={modalClasses}
         role="presentation"
         tabIndex={-1}

src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap

@@ -52,10 +52,18 @@ exports[`ModalWrapper should render 1`] = `
       primaryButtonDisabled={false}
       primaryButtonText="Save"
       secondaryButtonText="Cancel"
+      selectorsFloatingMenus={
+        Array [
+          ".bx--overflow-menu-options",
+          ".bx--tooltip",
+          ".flatpickr-calendar",
+        ]
+      }
     >
       <div
         className="bx--modal bx--modal-tall"
         id="modal"
+        onBlur={[Function]}
         onClick={[Function]}
         onKeyDown={[Function]}
         role="presentation"

src/components/OverflowMenu/OverflowMenu.js

@@ -323,7 +323,11 @@ export default class OverflowMenu extends Component {
   };
 
   closeMenu = () => {
+    let wasOpen = this.state.open;
     this.setState({ open: false }, () => {
+      if (wasOpen) {
+        this.focusMenuEl();
+      }
       this.props.onClose();
     });
   };
@@ -332,6 +336,12 @@ export default class OverflowMenu extends Component {
     this.menuEl = menuEl;
   };
 
+  focusMenuEl = () => {
+    if (this.menuEl) {
+      this.menuEl.focus();
+    }
+  };
+
   /**
    * Handles the floating menu being unmounted.
    * @param {Element} menuBody The DOM element of the menu body.
@@ -370,10 +380,6 @@ export default class OverflowMenu extends Component {
             !matches(target, '.bx--overflow-menu,.bx--overflow-menu-options')
           ) {
             this.closeMenu();
-            // Note:
-            // The last focusable element in the page should NOT be the trigger button of overflow menu.
-            // Doing so breaks the code that detects if floating menu losing focus, e.g. by keyboard events.
-            this.menuEl.focus();
           }
         },
         !hasFocusin