Merge pull request Expensify#68007 from software-mansion-labs/collectioneur/fix-confirm-modal-exit-animation

Collectioneur/fix confirm modal exit animation

Author: mountiny

src/components/Search/SearchPageHeader/SearchTypeMenuPopover.tsx

@@ -42,7 +42,10 @@ function SearchTypeMenuPopover({queryJSON}: SearchTypeMenuNarrowProps) {
                     scrollContainerStyle={styles.pv0}
                 />
             )}
-            <DeleteConfirmModal />
+            {/* DeleteConfirmModal is a stable JSX element returned by the hook.
+                Returning the element directly keeps the component identity across re-renders so React
+                can play its exit animation instead of removing it instantly. */}
+            {DeleteConfirmModal}
         </>
     );
 }

src/hooks/useDeleteSavedSearch.tsx

@@ -32,20 +32,18 @@ export default function useDeleteSavedSearch() {
         }
     };
 
-    function DeleteConfirmModal() {
-        return (
-            <ConfirmModal
-                title={translate('search.deleteSavedSearch')}
-                onConfirm={handleDelete}
-                onCancel={() => setIsDeleteModalVisible(false)}
-                isVisible={isDeleteModalVisible}
-                prompt={translate('search.deleteSavedSearchConfirm')}
-                confirmText={translate('common.delete')}
-                cancelText={translate('common.cancel')}
-                danger
-            />
-        );
-    }
+    const DeleteConfirmModal = (
+        <ConfirmModal
+            title={translate('search.deleteSavedSearch')}
+            onConfirm={handleDelete}
+            onCancel={() => setIsDeleteModalVisible(false)}
+            isVisible={isDeleteModalVisible}
+            prompt={translate('search.deleteSavedSearchConfirm')}
+            confirmText={translate('common.delete')}
+            cancelText={translate('common.cancel')}
+            danger
+        />
+    );
 
     return {showDeleteModal, DeleteConfirmModal};
 }

src/pages/Search/SearchTypeMenu.tsx

@@ -225,7 +225,10 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                         {section.translationPath === 'search.savedSearchesMenuItemTitle' ? (
                             <>
                                 {renderSavedSearchesSection(savedSearchesMenuItems)}
-                                <DeleteConfirmModal />
+                                {/* DeleteConfirmModal is a stable JSX element returned by the hook.
+                                Returning the element directly keeps the component identity across re-renders so React
+                                can play its exit animation instead of removing it instantly. */}
+                                {DeleteConfirmModal}
                             </>
                         ) : (
                             <>