fix(OverflowMenu): allow users to set focusTrap to false

carbon-design-system · Feb 23, 2022 · 4f7f6fb · 4f7f6fb
1 parent f711831
commit 4f7f6fb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2420,6 +2420,7 @@ exports[`DataTable should render 1`] = `
                       className="bx--toolbar-action bx--overflow-menu"
                       direction="bottom"
                       flipped={true}
+                      focusTrap={true}
                       iconDescription="Settings"
                       innerRef={null}
                       light={false}
@@ -3436,6 +3437,7 @@ exports[`DataTable sticky header should render 1`] = `
                       className="bx--toolbar-action bx--overflow-menu"
                       direction="bottom"
                       flipped={true}
+                      focusTrap={true}
                       iconDescription="Settings"
                       innerRef={null}
                       light={false}

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -42,6 +42,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
         className="custom-class bx--toolbar-action bx--overflow-menu"
         direction="bottom"
         flipped={true}
+        focusTrap={true}
         iconDescription="Add"
         innerRef={null}
         light={false}

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -122,6 +122,11 @@ class OverflowMenu extends Component {
      */
     flipped: PropTypes.bool,
 
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap: PropTypes.bool,
+
     /**
      * The CSS class for the icon.
      */
@@ -228,6 +233,7 @@ class OverflowMenu extends Component {
     open: false,
     direction: DIRECTION_BOTTOM,
     flipped: false,
+    focusTrap: true,
     renderIcon: OverflowMenuVertical16,
     onClick: () => {},
     onKeyDown: () => {},
@@ -455,6 +461,7 @@ class OverflowMenu extends Component {
       iconDescription,
       direction,
       flipped,
+      focusTrap,
       menuOffset,
       menuOffsetFlip,
       iconClass,
@@ -522,7 +529,7 @@ class OverflowMenu extends Component {
 
     const wrappedMenuBody = (
       <FloatingMenu
-        focusTrap
+        focusTrap={focusTrap}
         triggerRef={this._triggerRef}
         menuDirection={direction}
         menuOffset={flipped ? menuOffsetFlip : menuOffset}