[Due for payment 2025-11-19] [$250] Reports - App check/uncheck if tapping button at Reports tab in Select mode except Pay button

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.36-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1425/folder/13176922/41237500/965872917
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: iPhone 16 pro/ 18.6.2
App Component: Search

Action Performed:

Precondition: Create a workspace and go to it create 4 reports

• On 1st report create a manual expense (not submit)
• On 2nd report create a manual expense and submit it
• On 3rd report create a manual expense and submit, approve it
• On 4th report create 2 manual expenses (not submit)

1. Open app
2. Tap on Reports tab
3. At filter is Expenses type, long press on an expense to go to the Select mode
4. Tap on Submit button of an expense 2 times
5. Tap on Approve button of an expense 2 times
6. Tap on View button of an expense 2 times
7. Tap on Pay button of an expense

Expected Result:

App should apply correctly when tapping on submit, approve, view button as it works when tapping on Pay button

Actual Result:

Tapping on submit, approve, view (or review) button, app checks or unchecks expenses.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021981401313385242273
• Upwork Job ID: 1981401313385242273
• Last Price Increase: 2025-10-30

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Reports - App check/uncheck if tapping button at Reports tab in Select mode except Pay button

What is the root cause of that problem?

handleActionButtonPress has a condition that prevents actions from being performed when in mobile selection mode

App/src/libs/actions/Search.ts

Lines 83 to 86 in eed8391

	if (hasHeldExpense || isInMobileSelectionMode) {
	goToItem();
	return;
	}

When isInMobileSelectionMode is true, instead of performing the intended action, the function calls goToItem which triggers selection toggling

However, the View button was still toggling selection because the onSelectRow here checks for mobile selection mode and calls toggleTransaction instead of navigating

App/src/components/Search/index.tsx

Lines 597 to 600 in eed8391

	if (isMobileSelectionModeEnabled) {
	toggleTransaction(item);
	return;
	}

What changes do you think we should make in order to solve the problem?

We can change the condition to only prevent actions when there are held expenses, not when in mobile selection mode

    if (hasHeldExpense) {
        goToItem();
        return;
    }

App/src/libs/actions/Search.ts

Lines 83 to 86 in eed8391

	if (hasHeldExpense || isInMobileSelectionMode) {
	goToItem();
	return;
	}

And change the onSelectRow to allow VIEW actions to bypass mobile selection mode:

            if (isMobileSelectionModeEnabled && 'action' in item && item.action !== CONST.SEARCH.ACTION_TYPES.VIEW) {
                toggleTransaction(item);
                return;
            }

App/src/components/Search/index.tsx

Lines 597 to 600 in eed8391

	if (isMobileSelectionModeEnabled) {
	toggleTransaction(item);
	return;
	}

Or we can handle VIEW actions types explicitly instead of letting them fall through to the default case

        ...
        case CONST.SEARCH.ACTION_TYPES.VIEW: {
            // Navigate directly to the expense detail instead of calling goToItem which toggles selection
            if (isTransactionListItemType(item)) {
                const reportID = item.transactionThreadReportID ?? item.reportID ?? '';
                const backTo = Navigation.getActiveRoute();
                Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID, backTo}));
            }
            return;
        }
        default:
            goToItem();

App/src/libs/actions/Search.ts

Lines 88 to 116 in eed8391

	switch (item.action) {
	case CONST.SEARCH.ACTION_TYPES.PAY:
	getPayActionCallback(hash, item, goToItem, snapshotReport, snapshotPolicy, lastPaymentMethod, currentSearchKey);
	return;
	case CONST.SEARCH.ACTION_TYPES.APPROVE:
	approveMoneyRequestOnSearch(hash, [item.reportID], transactionID, currentSearchKey);
	return;
	case CONST.SEARCH.ACTION_TYPES.SUBMIT: {
	submitMoneyRequestOnSearch(hash, [item], [snapshotPolicy], transactionID, currentSearchKey);
	return;
	}
	case CONST.SEARCH.ACTION_TYPES.EXPORT_TO_ACCOUNTING: {
	if (!item) {
	return;
	}
	const policy = (snapshotPolicy ?? {}) as Policy;
	const connectedIntegration = getValidConnectedIntegration(policy);
	if (!connectedIntegration) {
	return;
	}
	exportToIntegrationOnSearch(hash, item.reportID, connectedIntegration, currentSearchKey);
	return;
	}
	default:
	goToItem();
	}

What alternative solutions did you explore? (Optional)

None

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

It doesn't toggle the selection when pressing the Pay button, compared to other action buttons.

What is the root cause of that problem?

We update the behavior so that pressing the action button will toggle the selection in mobile selection mode in this PR.

App/src/libs/actions/Search.ts

Lines 83 to 85 in 17a7d14

	if (hasHeldExpense || isInMobileSelectionMode) {
	goToItem();
	return;

goToItem will call onSelectRow.

App/src/components/SelectionListWithSections/Search/TransactionListItem.tsx

Lines 106 to 110 in 17a7d14

	const handleActionButtonPress = useCallback(() => {
	handleActionButtonPressUtil(
	currentSearchHash,
	transactionItem,
	() => onSelectRow(item, transactionPreviewData),

We previously used the same Button for Approve and Pay, but now, we use SettlementButton, which when presses shows a payment options.

App/src/components/SelectionListWithSections/Search/ActionCell.tsx

Lines 129 to 133 in 17a7d14

	if (action === CONST.SEARCH.ACTION_TYPES.PAY && !isInvoiceReport(iouReport)) {
	return (
	<SettlementButton
	shouldUseShortForm
	buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}

What changes do you think we should make in order to solve the problem?

The current approach to conditionally toggle the selection when pressing the action button is not reliable enough. The better approach is to apply pointer events none style whenever we are in mobile selection mode.

isInMobileSelectionMode && styles.pointerEventsNone

We need to apply this to all action buttons, including the SettlementButton.

isInMobileSelectionMode will be passed down from TransactionListItem with the same condition here.

App/src/components/SelectionListWithSections/Search/TransactionListItem.tsx

Line 111 in 17a7d14

shouldUseNarrowLayout && !!canSelectMultiple,

Then we can remove the mobile selection mode check here.

App/src/libs/actions/Search.ts

Lines 83 to 85 in 17a7d14

	if (hasHeldExpense || isInMobileSelectionMode) {
	goToItem();
	return;

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021981401313385242273

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ikevin127 (External)

[ikevin127]

🎉 Thanks everyone for the proposals!

🔄 What I gathered from the issue's expected result is that View, Submit and Approve are not working and instead the select is being toggled, whereas the Pay button allows event propagation such that it calls the Pay button action instead of toggling the selection of that transaction.

@nyomanjyotisa While your proposal's RCA makes sense, I think there's more to it and should look into how come the Pay button allows click event propagation whereas View, Submit and Approve are toggling row select instead. As for the solution, it seems incomplete because it only mentions the View button case.

@bernhardoj Your RCA looks correct. Must note that the referenced PR / issue are definitely weird because the issue suggests pretty much what our issue suggests as expected result, but seems like that PR did not implement what the issue expected result required 🤔.

Anyway, for the solution part: I don't think it's correct given the issue's expected result, because what you suggested wouldn't change the current behaviour: View, Submit and Approve are not calling their action but instead trigger select. 👈 Adding pointer events none on the 3 buttons doesn't change anything: the row select is still being toggled when being clicked on (since the buttons don't capture pointer events anymore).

♻️ Recap: From my understanding of the expected result, we need to allow the 3 buttons (View, Submit and Approve) to actually call their actions when clicked on as opposed to toggling row select, and row select should only toggle when clicked anywhere else within the row, except for the action buttons.

[bernhardoj]

Must note that the referenced #63968 / #63788 are definitely weird because the issue suggests pretty much what our issue suggests as expected result

Yep, #63968 suggests the same as OP, but the discussion in the issue suggests that tapping the action button will select/deselect the row. I think the QA test needs to be updated, too.

#63788 (comment)

[melvin-bot]

@ikevin127 Whoops! This issue is 2 days overdue. Let's get this updated quick!