[HOLD for payment 2022-09-30] [$250] Web - Login - The input field does not focus after following the magic link

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

---

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. In the email field, enter a gmail email address for a new account
3. Navigate to the email inbox of the account and open the validation email
4. Copy the link and change it to staging
5. Navigate to the staging link

Expected Result:

The input field must be focused

Actual Result:

The input field does not focus

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.0.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5730036_Recording__1889.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @Julesssss (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Julesssss]

Reproduced on Chrome. Not a big issue, but I suppose we should try to get this working.

[melvin-bot]

Triggered auto assignment to @mallenexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[thesahindia]

Proposal

We have to use componentDidMount in NewPasswordForm.js

    componentDidMount() {
        if (!canFocusInputOnScreenFocus() || !this.input) {
            return;
        }
        this.input.focus();
    }

Need to pass ref={el => this.input = el} here -

App/src/pages/settings/NewPasswordForm.js

Line 72 in a034007

<TextInput