From a026cde46a835437f3c21fff60198e721ab3bb0b Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:28:07 +0530
Subject: [PATCH] Fix folder deletion confirmation modal  (#8744)

Scrollwrapper `navigationDrawer` is interfering with this particular
modal rendering
---
 .../CurrentWorkspaceMemberFavorites.tsx       | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
index 46c64acbd..d45d8ef65 100644
--- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
@@ -17,6 +17,7 @@ import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navig
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { IconFolder, IconHeartOff, LightIconButton } from 'twenty-ui';
@@ -185,14 +186,17 @@ export const CurrentWorkspaceMemberFavorites = ({
         )}
       </NavigationDrawerItemsCollapsableContainer>
 
-      <ConfirmationModal
-        isOpen={isDeleteModalOpen}
-        setIsOpen={setIsDeleteModalOpen}
-        title={`Remove ${folder.favorites.length} ${folder.favorites.length > 1 ? 'favorites' : 'favorite'}?`}
-        subtitle={`This action will delete this favorite folder ${folder.favorites.length > 1 ? `and all ${folder.favorites.length} favorites` : 'and the favorite'} inside. Do you want to continue?`}
-        onConfirmClick={handleConfirmDelete}
-        deleteButtonText="Delete Folder"
-      />
+      {createPortal(
+        <ConfirmationModal
+          isOpen={isDeleteModalOpen}
+          setIsOpen={setIsDeleteModalOpen}
+          title={`Remove ${folder.favorites.length} ${folder.favorites.length > 1 ? 'favorites' : 'favorite'}?`}
+          subtitle={`This action will delete this favorite folder ${folder.favorites.length > 1 ? `and all ${folder.favorites.length} favorites` : 'and the favorite'} inside. Do you want to continue?`}
+          onConfirmClick={handleConfirmDelete}
+          deleteButtonText="Delete Folder"
+        />,
+        document.body,
+      )}
     </>
   );
 };