Fix pay action button is clickable in selection mode

src/components/ButtonWithDropdownMenu/index.tsx

@@ -59,6 +59,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
         shouldUseModalPaddingStyle = true,
         shouldUseShortForm = false,
         shouldUseOptionIcon = false,
+        shouldStayNormalOnDisable = false,
     } = props;
 
     const theme = useTheme();
@@ -169,6 +170,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                         onPress={handlePress}
                         text={customText ?? selectedItem?.text ?? ''}
                         isDisabled={isDisabled || areAllOptionsDisabled}
+                        shouldStayNormalOnDisable={shouldStayNormalOnDisable}
                         isLoading={isLoading}
                         shouldRemoveRightBorderRadius
                         style={isSplitButton ? [styles.flex1, styles.pr0] : {}}
@@ -192,6 +194,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                             ref={dropdownAnchor}
                             success={success}
                             isDisabled={isDisabled}
+                            shouldStayNormalOnDisable={shouldStayNormalOnDisable}
                             style={[styles.pl0]}
                             onPress={() => setIsMenuVisible(!isMenuVisible)}
                             shouldRemoveLeftBorderRadius
@@ -232,6 +235,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                     ref={buttonRef}
                     pressOnEnter={pressOnEnter}
                     isDisabled={isDisabled || !!options.at(0)?.disabled}
+                    shouldStayNormalOnDisable={shouldStayNormalOnDisable}
                     style={[styles.w100, style]}
                     disabledStyle={disabledStyle}
                     isLoading={isLoading}

src/components/ButtonWithDropdownMenu/types.ts

@@ -85,6 +85,9 @@ type ButtonWithDropdownMenuProps<TValueType> = {
     /** Should the confirmation button be disabled? */
     isDisabled?: boolean;
 
+    /** Whether the button should stay visually normal even when disabled. */
+    shouldStayNormalOnDisable?: boolean;
+
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;
 

src/components/SelectionListWithSections/Search/ActionCell.tsx

@@ -50,6 +50,7 @@ type ActionCellProps = {
     hash?: number;
     amount?: number;
     extraSmall?: boolean;
+    shouldDisablePointerEvents?: boolean;
 };
 
 function ActionCell({
@@ -65,6 +66,7 @@ function ActionCell({
     hash,
     amount,
     extraSmall = false,
+    shouldDisablePointerEvents,
 }: ActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
@@ -94,7 +96,11 @@ function ActionCell({
 
     if (!isChildListItem && ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE)) {
         return (
-            <View style={[StyleUtils.getHeight(variables.h20), styles.justifyContentCenter]}>
+            <View
+                style={[StyleUtils.getHeight(variables.h20), styles.justifyContentCenter, shouldDisablePointerEvents && styles.pointerEventsNone]}
+                accessible={!shouldDisablePointerEvents}
+                accessibilityState={{disabled: shouldDisablePointerEvents}}
+            >
                 <Badge
                     text={text}
                     icon={action === CONST.SEARCH.ACTION_TYPES.DONE ? Expensicons.Checkbox : Expensicons.Checkmark}
@@ -126,7 +132,9 @@ function ActionCell({
                 onPress={goToItem}
                 small={!extraSmall}
                 extraSmall={extraSmall}
-                style={[styles.w100]}
+                style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
+                isDisabled={shouldDisablePointerEvents}
+                shouldStayNormalOnDisable={shouldDisablePointerEvents}
                 innerStyles={buttonInnerStyles}
                 link={isChildListItem}
                 shouldUseDefaultHover={!isChildListItem}
@@ -152,10 +160,11 @@ function ActionCell({
                     chatReportID={iouReport?.chatReportID}
                     enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
                     onPress={(type, payAsBusiness, methodID, paymentMethod) => confirmPayment(type as ValueOf<typeof CONST.IOU.PAYMENT_TYPE>, payAsBusiness, methodID, paymentMethod)}
-                    style={[styles.w100]}
+                    style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
                     wrapperStyle={[styles.w100]}
                     shouldShowPersonalBankAccountOption={!policyID && !iouReport?.policyID}
-                    isDisabled={isOffline}
+                    isDisabled={isOffline || shouldDisablePointerEvents}
+                    shouldStayNormalOnDisable={shouldDisablePointerEvents}
                     isLoading={isLoading}
                     onlyShowPayElsewhere={shouldOnlyShowElsewhere}
                 />
@@ -169,10 +178,11 @@ function ActionCell({
             onPress={goToItem}
             small={!extraSmall}
             extraSmall={extraSmall}
-            style={[styles.w100]}
+            style={[styles.w100, shouldDisablePointerEvents && styles.pointerEventsNone]}
             isLoading={isLoading}
             success
-            isDisabled={isOffline}
+            isDisabled={isOffline || shouldDisablePointerEvents}
+            shouldStayNormalOnDisable={shouldDisablePointerEvents}
             isNested
         />
     );

src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx

@@ -232,7 +232,6 @@ function ReportListItemHeader<TItem extends ListItem>({
             currentSearchHash,
             reportItem,
             () => onSelectRow(reportItem as unknown as TItem),
-            shouldUseNarrowLayout && !!canSelectMultiple,
             snapshotReport,
             snapshotPolicy,
             lastPaymentMethod,
@@ -247,6 +246,7 @@ function ReportListItemHeader<TItem extends ListItem>({
                 handleActionButtonPress={handleOnButtonPress}
                 shouldShowUserInfo={showUserInfo}
                 containerStyles={[styles.pr3, styles.mb2]}
+                isInMobileSelectionMode={shouldUseNarrowLayout && !!canSelectMultiple}
             />
             <HeaderFirstRow
                 report={reportItem}

src/components/SelectionListWithSections/Search/TransactionListItem.tsx

@@ -114,27 +114,13 @@ function TransactionListItem<TItem extends ListItem>({
             currentSearchHash,
             transactionItem,
             () => onSelectRow(item, transactionPreviewData),
-            shouldUseNarrowLayout && !!canSelectMultiple,
             snapshotReport,
             snapshotPolicy,
             lastPaymentMethod,
             currentSearchKey,
             onDEWModalOpen,
         );
-    }, [
-        currentSearchHash,
-        transactionItem,
-        transactionPreviewData,
-        shouldUseNarrowLayout,
-        canSelectMultiple,
-        snapshotReport,
-        snapshotPolicy,
-        lastPaymentMethod,
-        currentSearchKey,
-        onSelectRow,
-        item,
-        onDEWModalOpen,
-    ]);
+    }, [currentSearchHash, transactionItem, transactionPreviewData, snapshotReport, snapshotPolicy, lastPaymentMethod, currentSearchKey, onSelectRow, item, onDEWModalOpen]);
 
     const handleCheckboxPress = useCallback(() => {
         onCheckboxPress?.(item);
@@ -179,6 +165,7 @@ function TransactionListItem<TItem extends ListItem>({
                         item={transactionItem}
                         handleActionButtonPress={handleActionButtonPress}
                         shouldShowUserInfo={!!transactionItem?.from}
+                        isInMobileSelectionMode={shouldUseNarrowLayout && !!canSelectMultiple}
                     />
                 )}
                 <TransactionItemRow

src/components/SelectionListWithSections/Search/UserInfoAndActionButtonRow.tsx

@@ -20,11 +20,13 @@ function UserInfoAndActionButtonRow({
     handleActionButtonPress,
     shouldShowUserInfo,
     containerStyles,
+    isInMobileSelectionMode,
 }: {
     item: TransactionReportGroupListItemType | TransactionListItemType;
     handleActionButtonPress: () => void;
     shouldShowUserInfo: boolean;
     containerStyles?: StyleProp<ViewStyle>;
+    isInMobileSelectionMode: boolean;
 }) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
@@ -39,6 +41,7 @@ function UserInfoAndActionButtonRow({
     const shouldShowToRecipient = hasFromSender && hasToRecipient && !!item?.to?.accountID && !!isCorrectSearchUserName(participantToDisplayName);
 
     const snapshotReport = useMemo(() => {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         return (snapshot?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as SearchReport;
     }, [snapshot, transactionItem.reportID]);
 
@@ -80,6 +83,7 @@ function UserInfoAndActionButtonRow({
                     hash={item.hash}
                     amount={(item as TransactionListItemType)?.amount ?? (item as TransactionReportGroupListItemType)?.total}
                     extraSmall={!isLargeScreenWidth}
+                    shouldDisablePointerEvents={isInMobileSelectionMode}
                 />
             </View>
         </View>

src/components/SettlementButton/index.tsx

@@ -70,6 +70,7 @@ function SettlementButton({
     enablePaymentsRoute,
     iouReport,
     isDisabled = false,
+    shouldStayNormalOnDisable = false,
     isLoading = false,
     formattedAmount = '',
     onPress,
@@ -564,6 +565,7 @@ function SettlementButton({
                     menuHeaderText={isInvoiceReport ? translate('workspace.invoices.paymentMethods.chooseInvoiceMethod') : undefined}
                     isSplitButton={shouldUseSplitButton}
                     isDisabled={isDisabled}
+                    shouldStayNormalOnDisable={shouldStayNormalOnDisable}
                     isLoading={isLoading}
                     defaultSelectedIndex={defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0}
                     onPress={(event, iouPaymentType) => handlePaymentSelection(event, iouPaymentType, triggerKYCFlow)}

src/components/SettlementButton/types.ts

@@ -71,6 +71,9 @@ type SettlementButtonProps = {
     /** Whether the button should be disabled */
     isDisabled?: boolean;
 
+    /** Whether the button should stay visually normal even when disabled. */
+    shouldStayNormalOnDisable?: boolean;
+
     /** Whether we should show a loading state for the main button */
     isLoading?: boolean;
 

src/libs/actions/Search.ts

@@ -70,7 +70,6 @@ function handleActionButtonPress(
     hash: number,
     item: TransactionListItemType | TransactionReportGroupListItemType,
     goToItem: () => void,
-    isInMobileSelectionMode: boolean,
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     snapshotReport: SearchReport,
     snapshotPolicy: Policy,
@@ -84,7 +83,7 @@ function handleActionButtonPress(
     const allReportTransactions = (isTransactionGroupListItemType(item) ? item.transactions : [item]) as SearchTransaction[];
     const hasHeldExpense = hasHeldExpenses('', allReportTransactions);
 
-    if (hasHeldExpense || isInMobileSelectionMode) {
+    if (hasHeldExpense) {
         goToItem();
         return;
     }

tests/unit/Search/handleActionButtonPressTest.ts

@@ -287,21 +287,14 @@ describe('handleActionButtonPress', () => {
     test('Should navigate to item when report has one transaction on hold', () => {
         const goToItem = jest.fn(() => {});
         // @ts-expect-error: Allow partial record in snapshot update for testing
-        handleActionButtonPress(searchHash, mockReportItemWithHold, goToItem, false, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
+        handleActionButtonPress(searchHash, mockReportItemWithHold, goToItem, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
         expect(goToItem).toHaveBeenCalledTimes(1);
     });
 
     test('Should not navigate to item when the hold is removed', () => {
         const goToItem = jest.fn(() => {});
         // @ts-expect-error: Allow partial record in snapshot update for testing
-        handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, false, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
+        handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
         expect(goToItem).toHaveBeenCalledTimes(0);
     });
-
-    test('Should run goToItem callback when user is in mobile selection mode', () => {
-        const goToItem = jest.fn(() => {});
-        // @ts-expect-error: Allow partial record in snapshot update for testing
-        handleActionButtonPress(searchHash, updatedMockReportItem, goToItem, true, snapshotReport, snapshotPolicy, mockLastPaymentMethod);
-        expect(goToItem).toHaveBeenCalledTimes(1);
-    });
 });