[@mantine/core] Modal: Fix incorrect click outside behavior (#2896)

mantinedev · Nov 12, 2022 · 17f8aa5 · 17f8aa5
1 parent fa44806
commit 17f8aa5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/mantine-core/src/Modal/Modal.story.tsx b/src/mantine-core/src/Modal/Modal.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Modal } from './Modal';
 import { Button } from '../Button';
+import { ColorInput } from '../ColorInput';
 
 export default { title: 'Modal' };
 
@@ -52,3 +53,14 @@ export function WithPageScrollbars() {
     </div>
   );
 }
+
+export function WithPortalChildren() {
+  return (
+    <div style={{ padding: 40 }}>
+      <WrappedModal>
+        <ColorInput label="No Portal" mb="md" />
+        <ColorInput label="Within Portal" mb="md" withinPortal />
+      </WrappedModal>
+    </div>
+  );
+}
diff --git a/src/mantine-core/src/Modal/Modal.tsx b/src/mantine-core/src/Modal/Modal.tsx
@@ -1,5 +1,12 @@
-import React, { useEffect } from 'react';
-import { useScrollLock, useFocusTrap, useFocusReturn, useId } from '@mantine/hooks';
+import React, { useEffect, useRef } from 'react';
+import {
+  useScrollLock,
+  useFocusTrap,
+  useFocusReturn,
+  useId,
+  useWindowEvent,
+  useMergedRef,
+} from '@mantine/hooks';
 import {
   DefaultProps,
   MantineNumberSize,
@@ -171,6 +178,9 @@ export function Modal(props: ModalProps) {
     { unstyled, classNames, styles, name: 'Modal' }
   );
   const focusTrapRef = useFocusTrap(trapFocus && opened);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useMergedRef(focusTrapRef, overlayRef);
+
   const _overlayOpacity =
     typeof overlayOpacity === 'number'
       ? overlayOpacity
@@ -197,6 +207,17 @@ export function Modal(props: ModalProps) {
 
   useFocusReturn({ opened, shouldReturnFocus: trapFocus && withFocusReturn });
 
+  const clickTarget = useRef<EventTarget>(null);
+  useWindowEvent('mousedown', (e) => {
+    clickTarget.current = e.target;
+  });
+
+  const handleOutsideClick = () => {
+    if (clickTarget.current !== overlayRef.current) return;
+
+    closeOnClickOutside && onClose();
+  };
+
   return (
     <OptionalPortal withinPortal={withinPortal} target={target}>
       <GroupedTransition
@@ -236,13 +257,13 @@ export function Modal(props: ModalProps) {
               <div
                 role="presentation"
                 className={classes.inner}
-                onClick={() => closeOnClickOutside && onClose()}
+                onClick={handleOutsideClick}
                 onKeyDown={(event) => {
                   const shouldTrigger =
                     (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';
                   shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();
                 }}
-                ref={focusTrapRef}
+                ref={mergedRef}
               >
                 <Paper<'div'>
                   className={classes.modal}