[Due for payment 2025-05-22] [$250] mWeb - Device´s back button has to be used twice to return from chat to inbox after a search

[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.17-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome
App Component: Other

Action Performed:

1. Open the staging.new.expensify.com website.
2. Open any chat.
3. Tap on the search icon on the top right corner.
4. Tap on "Search on this chat"
5. Write any word that will trigger a result.
6. When redirected to result, use device´s back button to return to chat.
7. Use device´s back button to return to inbox.
8. Check if you are automatically redirected to inbox or if device´s back button has to be used again.
9. Open the chat again and tap on the search icon.
10. Select any chat from the list displayed.
11. Use device´s back button to return to previous chat,
12. Use device´s back button to return to inbox.
13. Check if you are automatically redirected to inbox or if device´s back button has to be used again.

Expected Result:

When returning to chat after a search, using device´s back button should redirect to inbox.

Actual Result:

User has to use device´s back button twice to navigate from chat to inbox after returning from a search.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• 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/~021904248795597596858
• Upwork Job ID: 1904248795597596858
• Last Price Increase: 2025-04-28
• Automatic offers:
• truph01 | Contributor | 107135909

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.

[truph01]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-22 09:17:48 UTC.

Proposal

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

• User has to use device´s back button twice to navigate from chat to inbox after returning from a search.

What is the root cause of that problem?

• In SearchRouterModal, the shouldHandleNavigationBack prop is used:
  

  App/src/components/Search/SearchRouter/SearchRouterModal.tsx

  Line 39 in 8deddfa

  shouldHandleNavigationBack={isMobileChrome()}

• This prop pushes a new state that looks almost identical to the current state:

App/src/components/Modal/index.tsx

Line 51 in 8deddfa

window.history.pushState({shouldGoBack: true}, '', null);

• When the modal closes, there's logic to pop this extra state — essentially undoing the push:

App/src/components/Modal/index.tsx

Line 27 in 8deddfa

window.history.back();

• But, in case of this bug, the window.history.back() isn’t called, leaving two identical states in the history. This forces the user to hit the back button twice to return to the inbox screen.

• But why the window.history.back() is not called? The key issue is that window.history.back() is wrapped inside the hideModal function:
  

  App/src/components/Modal/index.tsx

  Line 23 in 8deddfa

  const hideModal = () => {

  
  hideModal only triggers after the modal successfully closes. By that point, the current window.history.state isn’t the report screen (step 2) anymore — it’s now the reports page (step 6), which lacks the (window.history.state as WindowState)?.shouldGoBack flag. As a result, window.history.back() never fires.

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

• We should call the window.history.back() before the user navigates to the report screen:

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 220 in 8deddfa

Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));

            if ((window.history.state as WindowState)?.shouldGoBack) {
                window.history.back();
            }
            setTimeout(() => {
                Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));
            }, 0);

• And we need to do the same in here:

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 277 to 281 in 3f97d5e

	if (item?.reportID) {
	Navigation.navigateToReportWithPolicyCheck({reportID: item?.reportID});
	} else if ('login' in item) {
	navigateToAndOpenReport(item.login ? [item.login] : [], false);
	}

                if ((window.history.state as WindowState)?.shouldGoBack) {
                    window.history.back();
                }
        
                setTimeout(()=>{
                    if (item?.reportID) {
                        Navigation.navigateToReportWithPolicyCheck({reportID: item?.reportID});
                    } else if ('login' in item) {
                        navigateToAndOpenReport(item.login ? [item.login] : [], false);
                    }
                }, 0)

• Because the bug only appears if isMobileChrome(), so only apply the change if isMobileChrome(). And consider applying the change in here.

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

• It is platform specific issue, can't add the test.

What alternative solutions did you explore? (Optional)

• We can create a backHistory function:

function backHistory() {
    return new Promise((resolve) => {
        const onPopState = () => {
            window.removeEventListener('popstate', onPopState);
            resolve?.();
        };

        window.addEventListener('popstate', onPopState);

        // Trigger the back navigation
        window.history.back();
    });
}

And update:

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 274 to 280 in 8deddfa

	KeyboardUtils.dismiss().then(() => {
	if (item?.reportID) {
	Navigation.navigateToReportWithPolicyCheck({reportID: item?.reportID});
	} else if ('login' in item) {
	navigateToAndOpenReport(item.login ? [item.login] : [], false);
	}
	});

                backHistory().then(()=>{
                    if (item?.reportID) {
                        Navigation.navigateToReportWithPolicyCheck({reportID: item?.reportID});
                    } else if ('login' in item) {
                        navigateToAndOpenReport(item.login ? [item.login] : [], false);
                    }
                })

• Do the same in

  App/src/components/Search/SearchRouter/SearchRouter.tsx

  Line 220 in 8deddfa

  Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: updatedQuery}));

[melvin-bot]

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

[melvin-bot]

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

[Sandeep2042001]

Issue solved ?

[melvin-bot]

📣 @Sandeep2042001! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Sandeep2042001]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~011e8ba6ed9a13b279?s=1110580755107926016

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[Sandeep2042001]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~011e8ba6ed9a13b279?s=1110580755107926016

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[siramo1]

Proposal for Fixing Double Back Navigation Issue (#58946)

Problem Statement:
When users perform a search within a chat and attempt to return to their inbox using the device's back button, they're currently required to press back twice when it should only take one press.

Technical Analysis:
The issue stems from how back navigation is coordinated with modal closing behavior. Currently, the history state check happens too late in the process, after the modal has already begun its closing animation. By the time the system attempts to execute the back navigation, the critical history state flag has been lost, resulting in the failed navigation attempt that requires a second back press.

Proposed Solution Approach:

1. Restructure the back-button handling sequence to evaluate navigation needs before initiating modal close procedures
2. Implement immediate history state evaluation when the back button is first pressed
3. Ensure the back navigation intent is preserved throughout the modal transition process
4. Maintain all existing functionality while eliminating the duplicate history entry

Implementation Strategy:

• Modify the modal component's back-button handling logic to prioritize navigation evaluation
• Implement proper state preservation during transitions
• Add safeguards to prevent history state conflicts
• Maintain all existing accessibility and usability standards

Testing Protocol:

1. Platform Coverage:
   • Mobile browsers (Chrome, Safari)
   • Desktop environments
2. Test Cases:
   • Standard search and return flow
   • Rapid back-button presses
   • Alternative navigation methods
3. Regression Checks:
   • All existing modal behaviors
   • Other navigation patterns
   • Accessibility features

Expected Outcomes:

• Single back-press returns users directly to their inbox
• No disruption to existing functionality
• Consistent behavior across all supported platforms
• Maintained performance standards

Compliance:
This solution will adhere to:

• Expensify's coding standards
• Contributor guidelines
• Security protocols
• Accessibility requirements

[melvin-bot]

📣 @siramo1! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[siramo1]

Contributor details
My Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01fcfd9d2426392405

[melvin-bot]

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

[ahmedGaber93]

reviewing today

[ahmedGaber93]

Daily updates: I am still reviewing the proposals.

[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]

Looking for better proposal

[truph01]

Proposal updated

• I added alternative solution

[melvin-bot]

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

[NicMendonca]

@ahmedGaber93 can you please check the above updated proposal? Thank you!

[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]

@truph01 alternative proposal LGTM!

It works well without delay or timing issue, also similar pattern is already used in the App here to detect keyboardDidHide.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @truph01 🎉 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 📖

[truph01]

@ahmedGaber93 PR is ready

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.45-21 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: duplicate history in mobile chrome #61297

If no regressions arise, payment will be issued on 2025-05-22. 🎊

For reference, here are some details about the assignees on this issue:

• @ahmedGaber93 requires payment through NewDot Manual Requests
• @truph01 requires payment automatic offer (Contributor)

[melvin-bot]

@ahmedGaber93 @NicMendonca @ahmedGaber93 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]