[UX Reliability] Use new modal in ConfirmModal

src/components/ConfirmModal.tsx

@@ -165,6 +165,7 @@ function ConfirmModal({
             shouldEnableNewFocusManagement={shouldEnableNewFocusManagement}
             restoreFocusType={restoreFocusType}
             shouldHandleNavigationBack={shouldHandleNavigationBack}
+            shouldUseNewModal
         >
             <ConfirmContent
                 title={title}

src/pages/ReportParticipantsPage.tsx

@@ -240,9 +240,9 @@ function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) {
         const accountIDsToRemove = selectedMembers.filter((id) => id !== currentUserAccountID);
         removeFromGroupChat(report.reportID, accountIDsToRemove);
         setSearchValue('');
-        setSelectedMembers([]);
         setRemoveMembersConfirmModalVisible(false);
         InteractionManager.runAfterInteractions(() => {
+            setSelectedMembers([]);
             clearUserSearchPhrase();
         });
     };

src/pages/RoomMembersPage.tsx

@@ -132,9 +132,9 @@ function RoomMembersPage({report, policies}: RoomMembersPageProps) {
             removeFromRoom(report.reportID, selectedMembers);
         }
         setSearchValue('');
-        setSelectedMembers([]);
         setRemoveMembersConfirmModalVisible(false);
         InteractionManager.runAfterInteractions(() => {
+            setSelectedMembers([]);
             clearUserSearchPhrase();
         });
     };

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -300,9 +300,9 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson
             });
         }
 
-        setSelectedEmployees([]);
         setRemoveMembersConfirmModalVisible(false);
         InteractionManager.runAfterInteractions(() => {
+            setSelectedEmployees([]);
             removeMembers(accountIDsToRemove, route.params.policyID);
         });
     };

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -1,6 +1,6 @@
 import lodashSortBy from 'lodash/sortBy';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import {ActivityIndicator, InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -217,9 +217,12 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
     };
 
     const handleDeleteCategories = () => {
-        setSelectedCategories([]);
         deleteWorkspaceCategories(policyId, selectedCategories);
         setDeleteCategoriesConfirmModalVisible(false);
+
+        InteractionManager.runAfterInteractions(() => {
+            setSelectedCategories([]);
+        });
     };
 
     const getHeaderButtons = () => {

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import {ActivityIndicator, InteractionManager, View} from 'react-native';
 import Button from '@components/Button';
 import type {DropdownOption, WorkspaceDistanceRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types';
 import ConfirmModal from '@components/ConfirmModal';
@@ -237,8 +237,11 @@ function PolicyDistanceRatesPage({
         }
 
         deletePolicyDistanceRates(policyID, customUnit, selectedDistanceRates);
-        setSelectedDistanceRates([]);
         setIsDeleteModalVisible(false);
+
+        InteractionManager.runAfterInteractions(() => {
+            setSelectedDistanceRates([]);
+        });
     };
 
     const toggleRate = (rate: RateForList) => {

src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx

@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import lodashSortBy from 'lodash/sortBy';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import {ActivityIndicator, InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -256,8 +256,11 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
 
     const handleDeletePerDiemRates = () => {
         deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem);
-        setSelectedPerDiem([]);
         setDeletePerDiemConfirmModalVisible(false);
+
+        InteractionManager.runAfterInteractions(() => {
+            setSelectedPerDiem([]);
+        });
     };
 
     const getHeaderButtons = () => {

src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -164,8 +164,6 @@ function ReportFieldsListValuesPage({
     };
 
     const handleDeleteValues = () => {
-        setSelectedValues({});
-
         const valuesToDelete = selectedValuesArray.reduce<number[]>((acc, valueName) => {
             const index = listValues?.indexOf(valueName) ?? -1;
 
@@ -183,6 +181,10 @@ function ReportFieldsListValuesPage({
         }
 
         setDeleteValuesConfirmModalVisible(false);
+
+        InteractionManager.runAfterInteractions(() => {
+            setSelectedValues({});
+        });
     };
 
     const openListValuePage = (valueItem: ValueListItem) => {