Fix iOS freeze on locked-account pay in selection mode (#95026)

src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx

@@ -324,7 +324,7 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
                     iouReport={moneyRequestReport}
                     onPaymentSelect={onSelectionModePaymentSelect}
                     onWorkspacePolicySelect={(selectedPolicy, triggerKYCFlow) => {
-                        if (shouldBlockAction()) {
+                        if (shouldBlockAction(undefined, true)) {
                             return;
                         }
                         triggerKYCFlow({policy: selectedPolicy});

src/components/MoneyRequestReportView/SelectionToolbar/index.tsx

@@ -256,7 +256,7 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
                                 onSelectionModePaymentSelect={onSelectionModePaymentSelect}
                                 selectionModeKYCSuccess={selectionModeKYCSuccess}
                                 onWorkspacePolicySelect={(selectedPolicy, triggerKYCFlow) => {
-                                    if (shouldBlockAction()) {
+                                    if (shouldBlockAction(undefined, true)) {
                                         return;
                                     }
                                     triggerKYCFlow({policy: selectedPolicy});

src/hooks/useSelectionModePayment.ts

@@ -11,6 +11,7 @@ import {useSearchQueryContext, useSearchResultsContext} from '@components/Search
 import type {PaymentActionParams} from '@components/SettlementButton/types';
 import {payInvoice, payMoneyRequest} from '@libs/actions/IOU/PayMoneyRequest';
 import {generateDefaultWorkspaceName} from '@libs/actions/Policy/Policy';
+import deferModalPresentationAfterPopoverDismiss from '@libs/deferModalPresentationAfterPopoverDismiss';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
@@ -119,17 +120,25 @@ function useSelectionModePayment({
     const isInvoiceReport = isInvoiceReportUtil(moneyRequestReport);
     const isAnyTransactionOnHold = hasHeldExpensesFromTransactions(transactions);
 
-    const shouldBlockAction = (paymentMethodType?: PaymentMethodType) => {
+    const presentBlockingAction = (action: () => void, deferBlockingPresentation: boolean) => {
+        if (deferBlockingPresentation) {
+            deferModalPresentationAfterPopoverDismiss(action);
+        } else {
+            action();
+        }
+    };
+
+    const shouldBlockAction = (paymentMethodType?: PaymentMethodType, deferBlockingPresentation = false) => {
         if (isDelegateAccessRestricted) {
-            showDelegateNoAccessModal();
+            presentBlockingAction(showDelegateNoAccessModal, deferBlockingPresentation);
             return true;
         }
         if (isAccountLocked) {
-            showLockedAccountModal();
+            presentBlockingAction(showLockedAccountModal, deferBlockingPresentation);
             return true;
         }
         if (!isUserValidated && paymentMethodType !== CONST.IOU.PAYMENT_TYPE.ELSEWHERE) {
-            Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path));
+            presentBlockingAction(() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.VERIFY_ACCOUNT.path)), deferBlockingPresentation);
             return true;
         }
         return false;
@@ -242,7 +251,7 @@ function useSelectionModePayment({
     })();
 
     const handleWorkspaceSelected = (wp: OnyxTypes.Policy) => {
-        if (shouldBlockAction()) {
+        if (shouldBlockAction(undefined, true)) {
             return;
         }
         kycWallRef.current?.continueAction?.({policy: wp});
@@ -269,10 +278,7 @@ function useSelectionModePayment({
         return result;
     })();
 
-    const onSelectionModePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => {
-        if (shouldBlockAction(iouPaymentType)) {
-            return;
-        }
+    const invokePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => {
         selectPaymentType({
             event,
             iouPaymentType,
@@ -296,6 +302,13 @@ function useSelectionModePayment({
         });
     };
 
+    const onSelectionModePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => {
+        if (shouldBlockAction(iouPaymentType, true)) {
+            return;
+        }
+        invokePaymentSelect(event, iouPaymentType, triggerKYCFlow);
+    };
+
     const selectionModeKYCSuccess = (type?: PaymentMethodType) => {
         confirmPayment({paymentType: type});
     };
@@ -306,6 +319,7 @@ function useSelectionModePayment({
     return {
         confirmPayment,
         shouldBlockAction,
+        invokePaymentSelect,
         onSelectionModePaymentSelect,
         selectionModeKYCSuccess,
         paymentSubMenuItems,

src/hooks/useSelectionModeReportActions.ts

@@ -177,46 +177,37 @@ function useSelectionModeReportActions({
     const effectiveShouldBlockSubmit = shouldBlockSubmit || isBlockSubmitDueToSelectedTransactionsOnSubmitPolicy;
 
     // Shared payment hook
-    const {
-        confirmPayment,
-        shouldBlockAction,
-        onSelectionModePaymentSelect: basePaymentSelect,
-        selectionModeKYCSuccess,
-        paymentSubMenuItems,
-        hasPayInSelectionMode,
-        isAnyTransactionOnHold,
-        isInvoiceReport,
-        kycWallRef,
-    } = useSelectionModePayment({
-        reportID: report?.reportID,
-        transactions,
-        formattedAmount: totalAmount,
-        shouldHidePaymentOptions: !shouldShowPayButton,
-        onlyShowPayElsewhere,
-        hasPayAction,
-        allExpensesSelected,
-        onHoldMenuOpen: ({requestType: rt, paymentType: pt, methodID}) => {
-            setRequestType(rt);
-            setPaymentType(pt);
-            setSelectedVBBAToPayFromHoldMenu(methodID);
-            setIsHoldMenuVisible(true);
-        },
-        onPaymentComplete: () => {
-            clearSelectedTransactions(true);
-            turnOffMobileSelectionMode();
-        },
-        confirmApproval,
-    });
+    const {confirmPayment, shouldBlockAction, invokePaymentSelect, selectionModeKYCSuccess, paymentSubMenuItems, hasPayInSelectionMode, isAnyTransactionOnHold, isInvoiceReport, kycWallRef} =
+        useSelectionModePayment({
+            reportID: report?.reportID,
+            transactions,
+            formattedAmount: totalAmount,
+            shouldHidePaymentOptions: !shouldShowPayButton,
+            onlyShowPayElsewhere,
+            hasPayAction,
+            allExpensesSelected,
+            onHoldMenuOpen: ({requestType: rt, paymentType: pt, methodID}) => {
+                setRequestType(rt);
+                setPaymentType(pt);
+                setSelectedVBBAToPayFromHoldMenu(methodID);
+                setIsHoldMenuVisible(true);
+            },
+            onPaymentComplete: () => {
+                clearSelectedTransactions(true);
+                turnOffMobileSelectionMode();
+            },
+            confirmApproval,
+        });
 
+    // Defer payment select until the popover dismiss animation completes. Blocking modals are shown
+    // synchronously inside the callback (popover already closed) to avoid double-defer on Android.
     const onSelectionModePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => {
-        if (shouldBlockAction(iouPaymentType)) {
-            return;
-        }
-        // This callback fires via onSubItemSelected before the popover closes. Defer heavy payment
-        // work so the dropdown dismiss animation completes first, avoiding perceived UI lag.
         TransitionTracker.runAfterTransitions({
             callback: () => {
-                basePaymentSelect(event, iouPaymentType, triggerKYCFlow);
+                if (shouldBlockAction(iouPaymentType)) {
+                    return;
+                }
+                invokePaymentSelect(event, iouPaymentType, triggerKYCFlow);
             },
             waitForUpcomingTransition: true,
         });

src/libs/actions/Search.ts

@@ -25,6 +25,7 @@ import type {
 } from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import {getCommandURL} from '@libs/ApiUtils';
+import deferModalPresentationAfterPopoverDismiss from '@libs/deferModalPresentationAfterPopoverDismiss';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import fileDownload from '@libs/fileDownload';
 import {getExportFileName} from '@libs/fileDownload/FileUtils';
@@ -1640,12 +1641,12 @@ function handleBulkPayItemSelected(params: {
     }
 
     if (isDelegateAccessRestricted) {
-        showDelegateNoAccessModal();
+        deferModalPresentationAfterPopoverDismiss(showDelegateNoAccessModal);
         return;
     }
 
     if (isAccountLocked) {
-        showLockedAccountModal();
+        deferModalPresentationAfterPopoverDismiss(showLockedAccountModal);
         return;
     }
 

src/libs/deferModalPresentationAfterPopoverDismiss/index.ios.ts

@@ -0,0 +1,14 @@
+import TransitionTracker from '@libs/Navigation/TransitionTracker';
+
+/**
+ * Presents a blocking modal after the payment popover dismisses.
+ * On iOS, presenting a modal while another modal is dismissing freezes the app.
+ */
+function deferModalPresentationAfterPopoverDismiss(presentModal: () => void) {
+    TransitionTracker.runAfterTransitions({
+        callback: presentModal,
+        waitForUpcomingTransition: true,
+    });
+}
+
+export default deferModalPresentationAfterPopoverDismiss;

src/libs/deferModalPresentationAfterPopoverDismiss/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Presents a blocking modal after the payment popover dismisses.
+ */
+function deferModalPresentationAfterPopoverDismiss(presentModal: () => void) {
+    presentModal();
+}
+
+export default deferModalPresentationAfterPopoverDismiss;

tests/unit/Search/handleActionButtonPressTest.ts

@@ -11,6 +11,10 @@ import type {LastPaymentMethod, Policy, Report, SearchResults} from '@src/types/
 import createRandomPolicy from '../../utils/collections/policies';
 
 jest.mock('@src/components/ConfirmedRoute.tsx');
+jest.mock('@libs/deferModalPresentationAfterPopoverDismiss', () => ({
+    __esModule: true,
+    default: (callback: () => void) => callback(),
+}));
 jest.mock('@src/libs/Navigation/Navigation', () => ({
     navigate: jest.fn(),
     dismissModal: jest.fn(),