[$250] Account settings - Left hand pane scrolls up when opening tab from the bottom

[lanitochka17]

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: 1.4.81-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Account settings (make sure the current tab is Profile, or else refresh the page and go to Account settings)
3. Scroll down
4. Click Troubleshoot

Expected Result:

The left hand pane will not scroll back up

Actual Result:

The left hand pane scrolls back up

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6508134_1718029667134.20240610_222408.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013bad1327b70b0b29
• Upwork Job ID: 1800965843804473661
• Last Price Increase: 2024-06-12

Issue Owner

Current Issue Owner: @jjcoffee

[melvin-bot]

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

[lanitochka17]

@abekkala FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

The settings page is scrolled to top when selecting an item at the bottom of the page for the first time.

What is the root cause of that problem?

When we select an item from the settings for the first time, a new bottom tab screen (settings) is added to the stack, so it's not scrolled to the top, but we see the new settings page.

A new bottom tab screen will be added to the stack if the topmost bottom tab and the destination bottom tab have different name or different policyID params.

App/src/libs/Navigation/linkTo/index.ts

Lines 89 to 96 in 2261654

	const isNewPolicyID =
	(topmostBottomTabRoute?.params as Record<string, string | undefined>)?.policyID !== (matchingBottomTabRoute?.params as Record<string, string | undefined>)?.policyID;
	if (topmostBottomTabRoute && (topmostBottomTabRoute.name !== matchingBottomTabRoute.name || isNewPolicyID)) {
	root.dispatch({
	type: CONST.NAVIGATION.ACTION_TYPE.PUSH,
	payload: matchingBottomTabRoute,
	});
	}

In our case, when we select an item from the settings page, the destination bottom tab is the settings page itself, but they have different policyID params.

The destination (matching) bottom tab have undefined params but the topmost bottom tab has an empty string of policyID params. The reason topmost bottom tab has an empty string of policyID is because when we open the settings page, the policyID defaults to an empty string and is always added to the params.

App/src/libs/Navigation/linkTo/index.ts

Lines 50 to 53 in 2261654

	const policyIDs = !!topmostCentralPaneRoute?.params && 'policyIDs' in topmostCentralPaneRoute.params ? (topmostCentralPaneRoute?.params?.policyIDs as string) : '';
	const extractedPolicyID = extractPolicyIDFromPath(`/${path}`);
	const policyIDFromState = getPolicyIDFromState(rootState);
	const policyID = extractedPolicyID ?? policyIDFromState ?? policyIDs;

App/src/libs/Navigation/linkTo/index.ts

Line 139 in 2261654

const actionForBottomTabNavigator = getActionForBottomTabNavigator(action, rootState, policyID, shouldNavigate);

App/src/libs/Navigation/linkTo/getActionForBottomTabNavigator.ts

Lines 25 to 29 in 763047d

	if (!payloadParams) {
	payloadParams = {policyID};
	} else if (!('policyID' in payloadParams && !!payloadParams?.policyID)) {
	payloadParams = {...payloadParams, policyID};
	}

But for the destination bottom tab, we return undefined if the policyID is empty.

App/src/libs/Navigation/linkingConfig/getMatchingBottomTabRouteForState.ts

Line 9 in 763047d

const paramsWithPolicyID = policyID ? {policyID} : undefined;

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

We have a different way of solving this.

1. When comparing the topmost and destination bottom tab policyID params, default both of them to empty string.
   

   App/src/libs/Navigation/linkTo/index.ts

   Lines 89 to 90 in 2261654

   	const isNewPolicyID =
   	(topmostBottomTabRoute?.params as Record<string, string | undefined>)?.policyID !== (matchingBottomTabRoute?.params as Record<string, string | undefined>)?.policyID;

const topmostBottomTabPolicyID = (topmostBottomTabRoute?.params as Record<string, string | undefined>)?.policyID ?? ''
const matchingBottomTabPolicyID = (matchingBottomTabRoute?.params as Record<string, string | undefined>)?.policyID ?? ''
const isNewPolicyID = topmostBottomTabPolicyID !== matchingBottomTabPolicyID;

I think this is the safest one, so I prefer this.

OR

2. Always return the policyID param in getMatchingBottomTabRouteForState and default it to an empty string.
   

   App/src/libs/Navigation/linkingConfig/getMatchingBottomTabRouteForState.ts

   Line 9 in 763047d

   const paramsWithPolicyID = policyID ? {policyID} : undefined;

const paramsWithPolicyID = {policyID: policyID ?? ''};

OR

3. Only add policyID to the params in getActionForBottomTabNavigator if the policyID is not empty.
   

   App/src/libs/Navigation/linkTo/getActionForBottomTabNavigator.ts

   Lines 25 to 29 in 763047d

   	if (!payloadParams) {
   	payloadParams = {policyID};
   	} else if (!('policyID' in payloadParams && !!payloadParams?.policyID)) {
   	payloadParams = {...payloadParams, policyID};
   	}

if (policyID) {
    if (!payloadParams) {
        payloadParams = {policyID};
    } else if (!('policyID' in payloadParams && !!payloadParams?.policyID)) {
        payloadParams = {...payloadParams, policyID};
    }
}

[melvin-bot]

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

[melvin-bot]

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