[HOLD for payment 2024-04-15] [$750] mWeb - Click on back button from country picker page redirects to wrong page

[kbecciv]

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

---

Problem

The country picker in Personal Details > Home Address is made of a component which is controlled in state and it does not have its own route. This was made to simplify reusing the component in various places in the app as its easier to just plug it into some page and let its open/ closed state be controlled from within the parent component as well as take the selected value and save it in the parent form.

This however leads to unexpected navigation behaviour with the back button in browser or in android, because the component is not its own page hence its not a screen in the browser history either.

Now that we got a good solution pattern in place with the IOUCurrencySelection component reused for 1. creating money request, 2. Confirming creation of money request and 3. Editing money request amount, all done using the same component and having its own path which allows for correct and predictable navigation.

Solution

Lets build the Country picker page as we did IOUCurrencySelection using its own route accepting goBack as url param, and making sure the AddressPage will consume the country picked from the ?country url param same as we do with ?currency in the other case.

Action Performed:

1. Go to Settings > Profile > Personal details > Home address > Country
2. Click back button of device

Expected Result:

Should navigates to Home address screen

Actual Result:

Navigates to Personal details screen

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.45-8
Reproducible in staging?: y
Reproducible in production?: new feature
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20230726_193945_Chrome.mp4

Screen_Recording_20230727_071059_Chrome.mp4

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690380615025549

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0111fe2b2f552059b7
• Upwork Job ID: 1697712669744525312
• Last Price Increase: 2023-09-28
• Automatic offers:
• gadhiyamanan | Reporter | 26488219

[OSBotify]

👋 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 @MariaHCD (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MariaHCD]

I don't necessarily think this should block the deploy. Looks like this PR introduced the updates for the country picker: #21049

[mountiny]

@MariaHCD This is not a blocker. This is same for Year picker and similar parts of the form. The Year page or in this case the State or Country picker are not its own route/ page in the stack hence when you click back it takes you to the personal details.

I think its something we might have to look at as a general solution as I think we would like this fixed for consistency, but its not a blocker.

I will demote this and add it to the navigation follow ups tracking project.