From 3d64133fe8e4028a3dc154d462299bdf81ec1150 Mon Sep 17 00:00:00 2001
From: AKMJ <anandkrish0646@gmail.com>
Date: Mon, 3 Jun 2024 18:45:52 +0530
Subject: [PATCH 1/2] Prevent mousedown event propagation outside modal and
 text selection during drag

---
 .../modules/ui/layout/modal/components/ModalLayout.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
index c6437c247096..269a258c7f3a 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
@@ -82,6 +82,7 @@ const StyledBackDrop = styled(motion.div)`
   top: 0;
   width: 100%;
   z-index: 9999;
+  user-select: none;
 `;
 
 /**
@@ -141,8 +142,15 @@ export const ModalLayout = ({
   modalRef,
   className,
 }: ModalLayoutProps) => {
+  const stopPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
   return (
-    <StyledBackDrop>
+    <StyledBackDrop
+      onMouseDown={stopPropagation}
+      onMouseUp={stopPropagation}
+      onMouseMove={stopPropagation}
+    >
       <StyledModalDiv
         // framer-motion seems to have typing problems with refs
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

From d7ba8ad3ede3771a3b79d446c49ec97d6ad3caff Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Tue, 4 Jun 2024 15:32:40 +0200
Subject: [PATCH 2/2] Stop only relevant events

---
 .../modules/ui/layout/modal/components/ModalLayout.tsx   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
index 269a258c7f3a..d11c6be921a5 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ModalLayout.tsx
@@ -142,15 +142,12 @@ export const ModalLayout = ({
   modalRef,
   className,
 }: ModalLayoutProps) => {
-  const stopPropagation = (e: React.MouseEvent) => {
+  const stopEventPropagation = (e: React.MouseEvent) => {
     e.stopPropagation();
   };
+
   return (
-    <StyledBackDrop
-      onMouseDown={stopPropagation}
-      onMouseUp={stopPropagation}
-      onMouseMove={stopPropagation}
-    >
+    <StyledBackDrop onMouseDown={stopEventPropagation}>
       <StyledModalDiv
         // framer-motion seems to have typing problems with refs
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment