[$250][Back button] Android - Unable to enter selection mode after exiting selection mode via device back button

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.39-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy Z Fold 4 / Android 14
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.
• Have submitted at least two expenses to any user.

1. Launch Expensify app.
2. Go to Reports.
3. Tap bookmark icon.
4. Tap Expense Reports.
5. Tap on the expense report that has at least two expenses.
6. Long tap on any expense > Select.
7. Note that the app enters selection mode with checkbox and dropdown button.
8. Tap app back button twice to return to Reports.
9. Long tap on the expense report > Select.
10. Tap device back button (important).
11. Tap on the expense report.
12. Long tap on any expense > Select.

Expected Result:

The app will enter selection mode with checkbox and dropdown button.

Actual Result:

The selected expense is highlighted, but there is no checkbox and dropdown button.

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/~021919848591903936734
• Upwork Job ID: 1919848591903936734
• Last Price Increase: 2025-05-13
• Automatic offers:
• FitseTLT | Contributor | 107321015

[melvin-bot]

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

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-02 22:09:28 UTC.

Proposal

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

Android - Unable to enter selection mode after exiting selection mode via device back button

What is the root cause of that problem?

When pressing the back button, while we are on search page before navigating to SearchMoneyRequestReportPage, this back handler here will be run

App/src/pages/Search/SearchPageNarrow.tsx

Lines 66 to 74 in 5e73cc5

	const handleBackButtonPress = useCallback(() => {
	if (!selectionMode?.isEnabled) {
	return false;
	}
	clearSelectedTransactions(undefined, true);
	return true;
	}, [selectionMode, clearSelectedTransactions]);
	useHandleBackButton(handleBackButtonPress);

that will set shouldTurnOffSelectionMode to true and clear the selected transaction so when on SearchMoneyRequestReportPage and select a transaction the use effect in search page will run (as the screen exists under the stack) here

App/src/components/Search/index.tsx

Lines 170 to 175 in 5e73cc5

	useEffect(() => {
	const selectedKeys = Object.keys(selectedTransactions).filter((key) => selectedTransactions[key]);
	if (selectedKeys.length === 0 && selectionMode?.isEnabled && shouldTurnOffSelectionMode) {
	turnOffMobileSelectionMode();
	}
	}, [selectedTransactions, selectionMode?.isEnabled, shouldTurnOffSelectionMode]);

because selection mode changed on SearchMoneyRequestReportPage but as the selectedTransactions (in search page) is empty and shouldTurnOffSelectionMode is true it will immediately turn off the mobile selection mode in SearchMoneyRequestReportPage

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

The effect was implemented in here to align the app back button with device back button. So that we can clear selected transaction and turnoff selection mode on device back press same as we do for app back button. The reason they chose to apply the useEffect approach to turnoff selection mode when implementing it is, as explained in here, at the time when turnoffMobileSelectionMode was called on back press immediately after clearSelectedTransactions another useEffect was turning back on the mobile selection mode. However, now that doesn't occur. So we can remove the use effect here and directly call the function below clear transaction here

App/src/pages/Search/SearchPageNarrow.tsx

Lines 70 to 71 in 5e73cc5

	clearSelectedTransactions(undefined, true);
	return true;

clearSelectedTransactions(undefined);
        turnOffMobileSelectionMode();

Then we will not need shouldTurnOffSelectionMode any more.

Alternatively, if we use the current approach, the use effect is supposed to operate for SearchPageNarrow so the useEffect need to early return if the screen is not focused

if (!isFocused) {
            return;
        }

or we can remove selectionMode?.isEnabled from the dependency of the useEffect because we don't need to run on its change and will ensure the useEffect will only run if there is a change in selected transactions while in the search page.

---

As a side note we can implement back handler to align the app back button and device back button in SearchMoneyRequestReportPage just like the search page by adding a code here

    const handleBackButtonPress = useCallback(() => {
        if (!selectionMode?.isEnabled) {
            return false;
        }

        setSelectedTransactionsID([]);
        turnOffMobileSelectionMode();
        return true;
    }, [selectionMode?.isEnabled, setSelectedTransactionsID]);

    useHandleBackButton(handleBackButtonPress);

We can do similar on other places if needed.

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)

[melvin-bot]

@zanyrenney Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[zanyrenney]

adding external label!

[melvin-bot]

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

[ahmedGaber93]

reviewing

[melvin-bot]

@ahmedGaber93 Eep! 4 days overdue now. Issues have feelings too...

[ahmedGaber93]

at the time when turnoffMobileSelectionMode was called on back press immediately after clearSelectedTransactions another useEffect was turning back on the mobile selection mode. However, now that doesn't occur. So we can remove the use effect here

@FitseTLT Could you clear up why this doesn't occur now?

[FitseTLT]

@ahmedGaber93 Previously. The problem was the selectedTransactions not getting cleared before the selection mode is turned off which caused this useEffect to be triggered to turn on the selection mode again.

App/src/components/Search/index.tsx

Lines 112 to 114 in d69b203

	if (selectedKeys.length > 0 && !selectionMode?.isEnabled) {
	turnOnMobileSelectionMode();
	}

as explained in here It was a problem with react asynchronous state update logic. But now when I debugged the momment useEffect is called the selectTransaction is 0 so the effect is not running.

[zanyrenney]

@ahmedGaber93 can you get back to @FitseTLT and help us move ahead with a proposal here please?

[ahmedGaber93]

But now when I debugged the momment useEffect is called the selectTransaction is 0 so the effect is not running.

@FitseTLT It is not occurred with you and also with me, but we didn't test it on the other issue when it happened for the first time to be sure we were able to reproduce it before but not now. So I asked what changes fixed it to confirm it will work fine for all users, maybe it is a race condition that doesn't happen every time.

CC @nkdengineer if you are still able to reproduce this case?

While testing I found a problem that is if we add a hardwareBackPress listener and call the function as we do for the back button in the header here, this doesn't work. The problem is the selectedTransactions is not cleared before the selection mode is turned off and then this useEffect is triggered to turn on the selection mode again. It may be related to the state and lifeCycle of React here.

[zanyrenney]

Sounds like we maybe can't reproduce how the issue was described. Is that the case then? If so, let's revisit what the next steps we should look into are.

[ahmedGaber93]

Is that the case then? If so, let's revisit what the next steps we should look into are.

Yeah, that's the case. If we can't confirm that behavior is not reproduced now, the next step will be going with the alternative proposal as a second option.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ahmedGaber93]

@FitseTLT's alternative proposal by return early when !isFocused LGTM!

His main proposal looks more clean, but we have a concern about this case (explained on the other issue here) and not sure if it fixed, or we’re simply unable to reproduce it.

While testing I found a problem that is if we add a hardwareBackPress listener and call the function as we do for the back button in the header here, this doesn't work. The problem is the selectedTransactions is not cleared before the selection mode is turned off and then this useEffect is triggered to turn on the selection mode again. It may be related to the state and lifeCycle of React here.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @puneetlath, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

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

[zanyrenney]

Seems like the overdue action was in assigning the contributor, seems like @puneetlath has done that now so we can remove his star and progress forward with the implementation.

[zanyrenney]

@FitseTLT please provide daily progress updates as you go! Thanks!