fix(ComposedModal): align handleMouseDown between Modal, ComposedModal (

#15934) * fix(ComposedModal): align handleMouseDown between Modal, ComposedModal * test(ComposedModal): update snaps
carbon-design-system · Apr 10, 2024 · ad1362c · ad1362c
1 parent e1549c1
commit ad1362c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1485,6 +1485,7 @@ Map {
       "selectorsFloatingMenus": Object {
         "args": Array [
           Object {
+            "isRequired": true,
             "type": "string",
           },
         ],

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -19,7 +19,10 @@ import mergeRefs from '../../tools/mergeRefs';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
-import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus';
+import wrapFocus, {
+  elementOrParentIsFloatingMenu,
+  wrapFocusWithoutSentinels,
+} from '../../internal/wrapFocus';
 import { usePrefix } from '../../internal/usePrefix';
 import { keys, match } from '../../internal/keyboard';
 import { useFeatureFlag } from '../FeatureFlags';
@@ -202,7 +205,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
   selectorPrimaryFocus?: string;
 
   /** Specify the CSS selectors that match the floating menus. */
-  selectorsFloatingMenus?: Array<string | null | undefined>;
+  selectorsFloatingMenus?: string[];
 
   size?: 'xs' | 'sm' | 'md' | 'lg';
 
@@ -283,10 +286,16 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
 
       onKeyDown?.(event);
     }
-    function handleMousedown(evt: MouseEvent) {
+
+    function handleMousedown(evt: React.MouseEvent<HTMLDivElement>) {
+      const target = evt.target as Node;
       evt.stopPropagation();
-      const isInside = innerModal.current?.contains(evt.target as Node);
-      if (!isInside && !preventCloseOnClickOutside) {
+      if (
+        !preventCloseOnClickOutside &&
+        !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
+        innerModal.current &&
+        !innerModal.current.contains(target)
+      ) {
         closeModal(evt);
       }
     }
@@ -525,7 +534,7 @@ ComposedModal.propTypes = {
   /**
    * Specify the CSS selectors that match the floating menus
    */
-  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
+  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
 
   /**
    * Specify the size variant.

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -315,10 +315,10 @@ const Modal = React.forwardRef(function Modal(
     const target = evt.target as Node;
     evt.stopPropagation();
     if (
-      innerModal.current &&
-      !innerModal.current.contains(target) &&
+      !preventCloseOnClickOutside &&
       !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
-      !preventCloseOnClickOutside
+      innerModal.current &&
+      !innerModal.current.contains(target)
     ) {
       onRequestClose(evt);
     }