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

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 1, 2022 · 03cae68 · 03cae68
1 parent 9e3f497
commit 03cae68
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4532,6 +4532,7 @@ Map {
       "ariaLabel": "open and close list of options",
       "direction": "bottom",
       "flipped": false,
+      "focusTrap": true,
       "iconDescription": "open and close list of options",
       "light": false,
       "menuOffset": [Function],
@@ -4569,6 +4570,9 @@ Map {
       "flipped": Object {
         "type": "bool",
       },
+      "focusTrap": Object {
+        "type": "bool",
+      },
       "iconClass": Object {
         "type": "string",
       },

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
@@ -2394,6 +2394,7 @@ exports[`DataTable should render 1`] = `
                   className="bx--toolbar-action bx--overflow-menu"
                   direction="bottom"
                   flipped={true}
+                  focusTrap={true}
                   iconDescription="Settings"
                   light={false}
                   menuOffset={[Function]}
@@ -3381,6 +3382,7 @@ exports[`DataTable sticky header should render 1`] = `
                   className="bx--toolbar-action bx--overflow-menu"
                   direction="bottom"
                   flipped={true}
+                  focusTrap={true}
                   iconDescription="Settings"
                   light={false}
                   menuOffset={[Function]}

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
@@ -16,6 +16,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
     className="custom-class bx--toolbar-action bx--overflow-menu"
     direction="bottom"
     flipped={true}
+    focusTrap={true}
     iconDescription="Add"
     light={false}
     menuOffset={[Function]}

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