From b65f0c542c56a9cacd610015f75c51ff90664adb Mon Sep 17 00:00:00 2001
From: mirovladimitrovski
 <46674160+mirovladimitrovski@users.noreply.github.com>
Date: Wed, 20 Nov 2024 15:40:56 +0100
Subject: [PATCH] fix: fix modal closing behavior (#649)

---
 packages/ui-react/src/components/Modal/Modal.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/ui-react/src/components/Modal/Modal.tsx b/packages/ui-react/src/components/Modal/Modal.tsx
index e135c52b6..a8eb651c5 100644
--- a/packages/ui-react/src/components/Modal/Modal.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.tsx
@@ -40,6 +40,7 @@ const Modal: React.FC<Props> = ({
   ...ariaAttributes
 }: Props) => {
   const modalRef = useRef<HTMLDialogElement>() as React.MutableRefObject<HTMLDialogElement>;
+  const mouseEventTargetsPairRef = useRef<Record<'downTarget' | 'upTarget', HTMLElement | null>>({ downTarget: null, upTarget: null });
 
   const { handleOpen, handleClose } = useModal();
 
@@ -89,6 +90,15 @@ const Modal: React.FC<Props> = ({
   }, [openModalEvent, closeModalEvent, open]);
 
   const clickHandler: ReactEventHandler<HTMLDialogElement> = (event) => {
+    const {
+      current: { downTarget, upTarget },
+    } = mouseEventTargetsPairRef;
+
+    // modal should only close if both mousedown and mouseup are done on the overlay
+    if (downTarget !== upTarget) {
+      return;
+    }
+
     // Backdrop click (the dialog itself) will close the modal
     if (event.target === modalRef.current) {
       onClose?.();
@@ -102,6 +112,12 @@ const Modal: React.FC<Props> = ({
       onKeyDown={keyDownHandler}
       onClose={closeHandler}
       onClick={clickHandler}
+      onMouseDown={(e) => {
+        mouseEventTargetsPairRef.current.downTarget = e.target as HTMLElement;
+      }}
+      onMouseUp={(e) => {
+        mouseEventTargetsPairRef.current.upTarget = e.target as HTMLElement;
+      }}
       ref={modalRef}
       role={role}
       {...ariaAttributes}