From b74f6901b408f8cf8ab924339fcdc8c45249d310 Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Tue, 10 Jun 2025 14:44:25 +0200
Subject: [PATCH] modal fix (#12514)

issue was the modal was closing itself due to onclickoutside while it
should have been excluded

fixes https://github.com/twentyhq/twenty/issues/12512
---
 .../modules/ui/layout/modal/components/ConfirmationModal.tsx | 2 +-
 .../src/modules/ui/layout/modal/components/Modal.tsx         | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
index 5e7367df0..48a87b206 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@@ -116,7 +116,7 @@ export const ConfirmationModal = ({
       isClosable={true}
       padding="large"
       modalVariant={modalVariant}
-      data-globally-prevent-click-outside
+      dataGloballyPreventClickOutside
     >
       <StyledCenteredTitle>
         <H1Title title={title} fontColor={H1TitleFontColor.Primary} />
diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
index d2670416c..de667e3c8 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
@@ -177,6 +177,7 @@ export type ModalProps = React.PropsWithChildren & {
   hotkeyScope?: ModalHotkeyScope;
   onEnter?: () => void;
   modalVariant?: ModalVariants;
+  dataGloballyPreventClickOutside?: boolean;
 } & (
     | { isClosable: true; onClose?: () => void }
     | { isClosable?: false; onClose?: never }
@@ -198,6 +199,7 @@ export const Modal = ({
   isClosable = false,
   onClose,
   modalVariant = 'primary',
+  dataGloballyPreventClickOutside = false,
 }: ModalProps) => {
   const isMobile = useIsMobile();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -259,6 +261,9 @@ export const Modal = ({
                 transition={{ duration: theme.animation.duration.normal }}
                 className={className}
                 isMobile={isMobile}
+                data-globally-prevent-click-outside={
+                  dataGloballyPreventClickOutside
+                }
               >
                 {children}
               </StyledModalDiv>