From e4e6d38f5b2cf463233ac1b1cf03cdce7b5d2563 Mon Sep 17 00:00:00 2001
From: Keilo75 <82605039+Keilo75@users.noreply.github.com>
Date: Sun, 6 Nov 2022 17:52:20 +0100
Subject: [PATCH] [@mantine/core] Modal: Fix bug when dragging mouse outside
---
src/mantine-core/src/Modal/Modal.story.tsx | 12 +++++++++
src/mantine-core/src/Modal/Modal.tsx | 29 +++++++++++++++++++---
2 files changed, 37 insertions(+), 4 deletions(-)
diff --git a/src/mantine-core/src/Modal/Modal.story.tsx b/src/mantine-core/src/Modal/Modal.story.tsx
index 1fd32613cd8..4964fe0e151 100644
--- 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() {
);
}
+
+export function WithPortalChildren() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/mantine-core/src/Modal/Modal.tsx b/src/mantine-core/src/Modal/Modal.tsx
index be430bf1f41..bc0afc40d45 100644
--- 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(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(null);
+ useWindowEvent('mousedown', (e) => {
+ clickTarget.current = e.target;
+ });
+
+ const handleOutsideClick = () => {
+ if (clickTarget.current !== overlayRef.current) return;
+
+ closeOnClickOutside && onClose();
+ };
+
return (
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}
>
className={classes.modal}