[Due for payment 2025-02-13] [$250] Log in - Login page scroll to top on change language

[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: 9.0.86-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: 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:

Preconditions: User should be logged out

1. Open https://staging.new.expensify.com/
2. Scroll to bottom
3. Change language

Expected Result:

Page position should not be changed

Actual Result:

Login page scroll to top

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6698620_1734580924023.295.mp4

View all open jobs on GitHub

555555555.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881832199834454313
• Upwork Job ID: 1881832199834454313
• Last Price Increase: 2025-01-21
• Automatic offers:
• linhvovan29546 | Contributor | 105899583

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

[github-actions]

⚠️ @Shahidullah-Muffakir Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[github-actions]

⚠️ @Shahidullah-Muffakir Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[mohit6789]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-16 21:58:56 UTC.

Proposal

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

Login page scroll to top on change language

What is the root cause of that problem?

Because we passed prevPreferredLocale in dependancy array of useEffect here it rerun whenever prevPreferredLocale value change. prevPreferredLocale is not state/props so we should not pass it in dependancy array.

App/src/pages/signin/SignInPageLayout/index.tsx

Line 50 in 784f3aa

const prevPreferredLocale = usePrevious(preferredLocale);

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

Remove prevPreferredLocale from dependancy array fix this issue.

App/src/pages/signin/SignInPageLayout/index.tsx

Line 82 in 784f3aa

}, [welcomeHeader, welcomeText, prevPreferredLocale, preferredLocale]);

Note: We should not remove this block because welcomeHeader and welcomeText are change based on some logic from here. So we should scroll to top whenever welcomeHeader and welcomeText are changed.

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

NA

What alternative solutions did you explore? (Optional)

[drminh2807]

Proposal

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

Log in - Login page scroll to top on change language

What is the root cause of that problem?

Here’s a rewritten version of your text with improved clarity and flow:

The SignInPageLayout component rerenders twice when the locale changes because both navigateFocus and children are updated. As a result, const prevPreferredLocale = usePrevious(preferredLocale); doesn't behave as intended.

Evidence of this can be observed by commenting out both properties—while the UI may display hidden components, the rerendering issue no longer occurs.

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

To address this, we should use an alternative method to track prevPreferredLocale.

App/src/pages/signin/SignInPageLayout/index.tsx

Lines 76 to 82 in 57f544f

	useEffect(() => {
	if (prevPreferredLocale !== preferredLocale) {
	return;
	}
	scrollPageToTop();
	}, [welcomeHeader, welcomeText, prevPreferredLocale, preferredLocale]);

    const prevPreferredLocale = useRef(preferredLocale);
    useEffect(() => {
        if (prevPreferredLocale.current !== preferredLocale) {
            prevPreferredLocale.current = preferredLocale;
            return;
        }

        scrollPageToTop();
    }, [welcomeHeader, welcomeText, preferredLocale]);

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)

N/A

[melvin-bot]

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

[melvin-bot]

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