Login - Email field does not auto focus after sign out, error shows up

[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.2.87-0 Reproducible in staging?: Yes Reproducible in production?: No If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory Email or phone of affected tester (no customers): N/A Issue reported by: Applause Internal Team Bug source: Exploratory - Significant User Experience Deterioration Device used: Mac 26.1 / Chrome App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Profile > Sign out.

Expected Result:

Email field will auto focus after sign out.

Actual Result:

Email field does not auto focus after sign out. Error shows up under the field.

Workaround:

Unknown

Platforms:

• [ ] Android: App
• [ ] Android: mWeb Chrome
• [ ] iOS: App
• [ ] iOS: mWeb Safari
• [ ] iOS: mWeb Chrome
• [x] Windows: Chrome
• [x] MacOS: Chrome / Safari

Screenshots/Videos

https://github.com/user-attachments/assets/9175a612-1c09-43be-9006-2a148067d323

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @mallenexpensify (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[bot]]

:wave: 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[bot]]

Triggered auto assignment to @jasperhuangg (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot[bot]]

💬 A slack conversation has been started in #expensify-open-source

[samranahm]

Proposal

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

Login - Email field does not auto focus after sign out, error shows up

What is the root cause of that problem?

When a user signed out, the firstBlurred ref in the BaseLoginForm component remained in its previous state (true) When the login form became visible again after sign out, the field would focus correctly, but because login state was empty and firstBlurred.current was still true, validation would run This caused the error to display immediately

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

We should add a new useEffect hook in BaseLoginForm that watches the login state for changes When login becomes empty (which happens when clearSignInData() is called during sign out), it will resets firstBlurred.current to false so validation doesn't run until the user interacts with the field and clears any existing form error messages

useEffect(() => {
    if (login === '') {
        firstBlurred.current = false;
        setFormError(undefined);
    }
}, [login]);

below this

https://github.com/Expensify/App/blob/1dfe78c5dcd6bc2161ab30a458beae314eb9ba48/src/pages/signin/LoginForm/BaseLoginForm.tsx#L177-L187

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.

[jasperhuangg]

@BlameGPT can you take a look?

[jasperhuangg]

Reverting https://github.com/Expensify/App/pull/76933 locally fixes the issue

[jasperhuangg]

I think we should probably revert. This bug doesn't only happen on signout, it happens every time you navigate to the sign in page. Since this is the entry point for all of our users we can't have any jankiness. Worried that this might affect the auto-focus in other parts of the app too.

[jasperhuangg]

revert CP'd, requested a retest: https://expensify.enterprise.slack.com/archives/C09V78U42D8/p1766644904436069

[IuliiaHerets]

@jasperhuangg MacOS Monterey / Chrome Web 9.2.87-3 Passed

https://github.com/user-attachments/assets/99d4684d-aeb0-4a83-a20c-866767e89e45

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.