fix(ComposedModal): Address several problems with selectorsFloatingMenus prop on ComposedModal (#10003)

dcwarwick · tay1orjones · kodiakhq[bot] · web-flow · commit a8a128cc8ff1 · 2021-11-08T18:39:57.000Z
* 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 &lt;tay1orjones@users.noreply.github.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
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));
   }
 }
 
