fix(ComposedModal): Address several problems with selectorsFloatingMe…

…nus prop on ComposedModal (#10003) * fix(ComposedModal): fix proptype and avoid prop passthrough to dom * fix(ComposedModal): selectorsFloatingMenus adds rather than replaces * chore: update api snapshot Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 8, 2021 · a8a128c · a8a128c
1 parent 80ee23c
commit a8a128c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -762,7 +762,12 @@ Map {
         "type": "string",
       },
       "selectorsFloatingMenus": Object {
-        "type": "string",
+        "args": Array [
+          Object {
+            "type": "string",
+          },
+        ],
+        "type": "arrayOf",
       },
       "size": Object {
         "args": Array [

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -91,7 +91,7 @@ export default class ComposedModal extends Component {
     /**
      * Specify the CSS selectors that match the floating menus
      */
-    selectorsFloatingMenus: PropTypes.string,
+    selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
 
     /**
      * Specify the size variant.
@@ -234,6 +234,7 @@ export default class ComposedModal extends Component {
       danger,
       preventCloseOnClickOutside, // eslint-disable-line
       selectorPrimaryFocus, // eslint-disable-line
+      selectorsFloatingMenus, // eslint-disable-line
       size,
       ...other
     } = this.props;

diff --git a/packages/react/src/internal/wrapFocus.js b/packages/react/src/internal/wrapFocus.js
@@ -20,16 +20,15 @@ const { prefix } = settings;
  * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
  * @returns {boolean} `true` of the given `node` is in a floating menu.
  */
-function elementOrParentIsFloatingMenu(
-  node,
-  selectorsFloatingMenus = [
-    `.${prefix}--overflow-menu-options`,
-    `.${prefix}--tooltip`,
-    '.flatpickr-calendar',
-  ]
-) {
+function elementOrParentIsFloatingMenu(node, selectorsFloatingMenus = []) {
   if (node && typeof node.closest === 'function') {
-    return selectorsFloatingMenus.some((selector) => node.closest(selector));
+    const allSelectorsFloatingMenus = [
+      `.${prefix}--overflow-menu-options`,
+      `.${prefix}--tooltip`,
+      '.flatpickr-calendar',
+      ...selectorsFloatingMenus,
+    ];
+    return allSelectorsFloatingMenus.some((selector) => node.closest(selector));
   }
 }