From ce1469cf0cbefc12e2106983b531b6dfa046502e Mon Sep 17 00:00:00 2001
From: Anand Krishnan M J
 <87609792+Anand-Krishnan-M-J@users.noreply.github.com>
Date: Tue, 4 Jun 2024 19:25:02 +0530
Subject: [PATCH] [ Fix ] [ Issue - 5701 ] Mouse down and drag is selecting
 records, while file import modal is open (#5716)

## Changes Made

- Prevent mouse event propagation outside modal
- Prevent text selection inside the modal during drag event

## Related Issue

https://github.com/twentyhq/twenty/issues/5701

## Evidence

### Before


https://github.com/twentyhq/twenty/assets/87609792/c15c2a1d-5e3b-4fc5-a98a-638615e8d7b9

### After

Actual drag operation is done, but not visible in the video



https://github.com/twentyhq/twenty/assets/87609792/f2e68e67-1eb1-4a15-83c8-8cb4313bcaa1

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
---
 .../src/modules/ui/layout/modal/components/ModalLayout.tsx | 7 ++++++-
 1 file changed, 6 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..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
@@ -82,6 +82,7 @@ const StyledBackDrop = styled(motion.div)`
   top: 0;
   width: 100%;
   z-index: 9999;
+  user-select: none;
 `;
 
 /**
@@ -141,8 +142,12 @@ export const ModalLayout = ({
   modalRef,
   className,
 }: ModalLayoutProps) => {
+  const stopEventPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   return (
-    <StyledBackDrop>
+    <StyledBackDrop onMouseDown={stopEventPropagation}>
       <StyledModalDiv
         // framer-motion seems to have typing problems with refs
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment