[Due for payment 2025-05-14] [$250] Expense - Unable to exit selection mode in expense report without closing expense report

[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.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): applausetester+x27@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.4
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Launch Expensify app.
2. Go to workspace chat.
3. Submit two expenses.
4. Tap on the expense preview.
5. Long tap on any expense.
6. Tap Select.
7. Try to exit selection mode without having to close the expense report.

Expected Result:

User should be able to exit selection mode without having to close the expense report.

Actual Result:

There is no way to exit the selection mode without having to close the expense report via app back button on the top left.

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

Bug6819388_1746178295714.ScreenRecording_05-02-2025_17-21-42_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021918353232385500146
• Upwork Job ID: 1918353232385500146
• Last Price Increase: 2025-05-02

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[nkdengineer]

Proposal

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

There is no way to exit the selection mode without having to close the expense report via app back button on the top left.

What is the root cause of that problem?

When users press back button in the header, we always trigger navigation to go back to the previous page

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

Update HeaderWithBackButton to turn off selection mode if it's enabled in

App/src/components/HeaderWithBackButton/index.tsx

Lines 162 to 164 in 223a34c

	onPress={() => {
	if (Keyboard.isVisible()) {
	Keyboard.dismiss();

const {selectionMode} = useMobileSelectionMode();
...
if (Keyboard.isVisible()) {
                                    Keyboard.dismiss();
                                }
                                if(selectionMode?.isEnabled){
                                    turnOffMobileSelectionMode()
                                    return
                                }

we should check other places like this and apply the same solution

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

None

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.

[allgandalf]

@jnowakow please look into fixing this one on Monday

[melvin-bot]

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

[melvin-bot]

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

[ishakakkad]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-04 07:10:49 UTC.

Proposal

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

Unable to exit selection mode in expense report without closing expense report

What is the root cause of that problem?

There are no way in UI to exit the selection mode without going back to previous screen.

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

• We should add some button like cancel or exist or icon inside the the HeaderWithBackButton, this button only visible if selectionMode is on. Button placement decision needs to discussed with design team. (For ex, in whatsapp we have cancel button to exist the selection mode)

pass shouldDisplayExistSelectionModeButton pass as a props

OR

const shouldDisplayExistSelectionModeButton = selectionMode?.isEnabled && shouldShowBackButton;

OR 

const shouldDisplayExistSelectionModeButton = selectionMode?.isEnabled && isNarrowScreen;

{shouldDisplayExistSelectionModeButton && <ExistSeletionModeButton />} 

We can create ExistSeletionModeButton component same way we have help button Or we can add the logic into HeaderWithBackButton itself.

https://github.com/Expensify/App/blob/main/src/components/SidePanel/HelpComponents/HelpButton.tsx#L16

• onPress event of button we should exist the selection mode.

onPress={() => {
  turnOffMobileSelectionMode();
}}

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

None UI changes

What alternative solutions did you explore? (Optional)

Another option is to, we can hide the back button when selection mode is on and show the Cancel button. (In Whatsapp if we are in selection mode it hide the back button and shows the close button). And follow same logic of main proposal.

App/src/components/HeaderWithBackButton/index.tsx

Line 159 in 223a34c

{shouldShowBackButton && (

{shouldShowBackButton && !shouldDisplayExistSelectionModeButton (

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.

[jnowakow]

I'll handle this one