[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

[melvin-bot]

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

[melvin-bot]

Current assignee @Julesssss is eligible for the Exported assigner, not assigning anyone new.

[mallenexpensify]

@parasharrajat can you review @thesahindia 's proposal above? Thx
Job posted https://www.upwork.com/jobs/~016f4999710bb43714

[syedsaroshfarrukhdot]

Proposal

We need to pass autoFocus={true} props to TextInput in the NewPasswordForm.js and it focuses the input on componentDidMount.

App/src/pages/settings/NewPasswordForm.js

Line 72 in a034007

<TextInput

Like This

<TextInput

                autoFocus={true}
                label={`${this.props.translate('setPasswordPage.enterPassword')}`}
                secureTextEntry
                autoComplete={ComponentUtils.NEW_PASSWORD_AUTOCOMPLETE_TYPE}
                textContentType="newPassword"
                value={this.props.password}
                onChangeText={password => this.props.updatePassword(password)}
                onBlur={() => this.onBlurNewPassword()}
                onSubmitEditing={() => this.props.onSubmitEditing()}

/>

After Fixing The Issue

Screen.Recording.2022-09-15.at.3.49.44.AM.mov

[parasharrajat]

@syedsaroshfarrukhdot's proposal looks good to me.
cc: @Julesssss

🎀 👀 🎀 C+ reviewed

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.5-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Focus input field follow up magic link #11163

If no regressions arise, payment will be issued on 2022-09-30. 🎊

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

@Julesssss, @mallenexpensify, @parasharrajat, @syedsaroshfarrukhdot Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

Current assignee @parasharrajat is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Current assignee @Julesssss is eligible for the External assigner, not assigning anyone new.

[Julesssss]

Hey @trjExpensify, Matt is away at the moment. Could you please pay out this issue? Thanks!

[trjExpensify]

👋 I settled up with @syedsaroshfarrukhdot.

The other hire on this job is @mananjadhav, but @parasharrajat was C+. Any idea what happened there? In the meantime, I've sent Rajat an offer.

[mananjadhav]

I did work on an issue related to magic link and forgot password. But I don't think it is this one.

[trjExpensify]

Gotcha. Any idea which issue and contract that is? Looks like you've been paid for this one, you see.

[mananjadhav]

Yeah I found the issue. Looks like I was paid for #10785 with this issue's Upwork job. I don't see any Upwork job or payment for 10785.

[trjExpensify]

Got it, got it. Cool, so just waiting on @parasharrajat to accept the contract for this job and then we can close it out!

[trjExpensify]

Cool, settled up with @parasharrajat. Thanks everyone! 🎉