[Due for payment 2025-07-25] Report - "Select Multiple" still seen on top of report, after selecting and removing expense

[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: 9.1.81-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from TestRail: #64259
Email or phone of affected tester (no customers): ibellicotest+1311@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome (mWeb - Hybrid App)
App Component: Money Requests

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the staging.new.expensify.com website.
2. Open any workspace chat.
3. Submit two manual expenses.
4. Open the report of the just created expenses.
5. Long tap on any of them and select it.
6. Tap on the dropdown menu and select "Move Expense"
7. Tap on "Remove from report"
8. Note that expense is removed, but when landing on report again, "Select Multiple" can still be seen on top of report.

Expected Result:

"Select Multiple" should not be visible anymore after removing an expense from report.

Actual Result:

"Select Multiple" is still visible on top of report, after selecting and removing one expense from a report.

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

Issue Owner

Current Issue Owner: @lschurr

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @deetergp (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @lschurr (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.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[Eskalifer1]

Proposal

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

Report - "Select Multiple" still seen on top of report, after selecting and removing expense

What is the root cause of that problem?

The problem is that after transferring an expense to another report, when there are 1 or 0 items left in the report, we start displaying another View that no longer has select, but because we have not turned off selection mode, our MoneyReportHeader remains in the select state:

App/src/components/MoneyReportHeader.tsx

Lines 900 to 910 in 7323ec5

	if (isMobileSelectionModeEnabled) {
	return (
	<HeaderWithBackButton
	title={translate('common.selectMultiple')}
	onBackButtonPress={() => {
	clearSelectedTransactions(true);
	turnOffMobileSelectionMode();
	}}
	/>
	);
	}

Here is the function that is performed during the transfer:

App/src/pages/iou/request/step/IOURequestEditReport.tsx

Lines 39 to 46 in 7323ec5

	const removeFromReport = () => {
	if (!transactionReport || selectedTransactionIDs.length === 0) {
	return;
	}
	changeTransactionsReport(selectedTransactionIDs, CONST.REPORT.UNREPORTED_REPORT_ID);
	clearSelectedTransactions(true);
	Navigation.dismissModal();
	};

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

We need to check how many elements will remain after the transfer, and if there are less than 2, then turn off selection mode one by one:

1. We get all the transactionIds:

  const {transactions: allReportTransactions} = useTransactionsAndViolationsForReport(reportID);

    const {reportActions: unfilteredReportActions} = usePaginatedReportActions(reportID);
    const reportActions = getFilteredReportActionsForReportView(unfilteredReportActions);
    const reportTransactionIDs = useMemo(
        () => getAllNonDeletedTransactions(allReportTransactions, reportActions).map((transaction) => transaction.transactionID),
        [allReportTransactions, reportActions],
    );

2. Check how many items are left, and if there are less than 2 items left, turn off selectionMode:

    const removeFromReport = () => {
        if (!transactionReport || selectedTransactionIDs.length === 0) {
            return;
        }

        changeTransactionsReport(selectedTransactionIDs, CONST.REPORT.UNREPORTED_REPORT_ID);
        clearSelectedTransactions(true);

        const remainingTransactionIDs = reportTransactionIDs.filter((id) => !selectedTransactionIDs.includes(id));

        if (remainingTransactionIDs.length < 2) {
            turnOffMobileSelectionMode();
        }

        Navigation.dismissModal();
    };

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[SzymczakJ]

Hey, this PR is regression from my PR: Reports page and TransactionItemRow performance improvements[part 1] #65421. I will create PR with the fix soon.