[HOLD for payment 2023-07-14] Web - First cell of magic input field is not focused on clicking 'Didn't receive a magic code' 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:

Action Performed:

1. Navigate to staging sign-in page
2. Enter email > click on continue
3. Wait for the 30 second time out to finish
4. Enter wrong magic code
5. Click on 'Didn't receive a magic code' link

Expected Result:

The first cell of the magic code input field should be focused

Actual Result:

The first cell of the magic code input field is not focused

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.36-4
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screencast.from.2023-07-05.13-57-21.mp4

Recording.3417.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Natnael-Guchima
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688554945270799

View all open jobs on GitHub

[OSBotify]

👋 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]

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

[samh-nl]

Proposal

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

The first cell of the magic input is not focused upon resending the code.

What is the root cause of that problem?

The input focus is not restored in the resendValidateCode function:

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Lines 180 to 188 in 4f9f428

	const resendValidateCode = () => {
	setTwoFactorAuthCode('');
	setFormError({});
	setValidateCode('');
	User.resendValidateCode(props.credentials.login, true);
	// Give feedback to the user to let them know the email was sent so they don't spam the button.
	setTimeRemaining(30);
	};

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

The focus should be restored by calling inputValidateCodeRef.current.focus() in BaseValidateCodeForm upon resending the code.

What alternative solutions did you explore? (Optional)

N/A

[MariaHCD]

Looking to see if this is related to #21724

[rushatgabhane]

Hi @MariaHCD, I don't think this is a bug.

It's the expected result. After a failed validation, we decided to blur the input in #20169 (comment).

[rushatgabhane]

Regardless, focusing the first cell isn't a good idea. Because if you type one single number it'll auto-submit because you have 6 digits in the input. What do you think?

[MariaHCD]

After a failed validation, we decided to blur the input

In this case, there was no failed validation. The user just requested for a new code.

Because if you type one single number it'll auto-submit because you have 6 digits in the input

Oh, interesting. Why does it auto-submit when only a single digit has been entered?

[HezekielT]

@rushatgabhane I can address this issue by changing the if condition in my PR to

if (!(inputValidateCodeRef.current && hasError && (props.session.autoAuthState === CONST.AUTO_AUTH_STATE.FAILED || props.account.isLoading))) {
            return;
        }

I limited the hasError only to props.session.autoAuthState that is why this issue is occuring should I change my pr? @MariaHCD

[rushatgabhane]

@MariaHCD sorry, I misunderstood this issue.

The steps to get this bug are -

1. Get an error by submitting wrong code
2. Click resend code

Expected: input is cleared and focused
Actual: input is cleared and blurred

[HezekielT]

@MariaHCD
My PR causes the input to lose focus when the props.account.isLoading is true, I should have also ensured that hasError has to be true in addition to props.account.isLoading

[rushatgabhane]

@HezekielT yes please, could you please raise a PR since it's under regression period

[MariaHCD]

1. Get an error by submitting wrong code

Even if you don't submit a code at all and then click resend code, the input is blurred.

[HezekielT]

Ok I will do that now @MariaHCD @rushatgabhane Sorry for the regression.

[MariaHCD]

@HezekielT All good, please create the PR. Thanks! The fix you outlined here looks like it will fix this!

[rushatgabhane]

Even if you don't submit a code at all and then click resend code, the input is blurred

ahh, got it!

[HezekielT]

@MariaHCD @rushatgabhane PR is ready! Sorry for the delay and for the regression once again.

[Julesssss]

Cp'd! Removing the blocker label.

[Julesssss]

We have already validated the AdHoc build, but here are some screenshots from the staging build:

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MariaHCD]

@zanyrenney this deploy blocker was a regression and was already fixed here. We just need to pay out the reporting bonus to @Natnael-Guchima.

[Natnael-Guchima]

No problem. Thanks @MariaHCD

[melvin-bot]

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

• Fix - magic input loses focus when clicked on didn't receive magic code #22265

If no regressions arise, payment will be issued on 2023-07-14. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@MariaHCD] The PR that introduced the bug has been identified. Link to the PR: Fix - modified magic code link redirects to welcome screen with first place of magic code green #21724
• [@MariaHCD] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Fix - modified magic code link redirects to welcome screen with first place of magic code green #21724 (comment)
• [@MariaHCD] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: NA
• [@MariaHCD] Determine if we should create a regression test for this bug: ✅
• [@MariaHCD] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again: [HOLD for payment 2023-07-14] Web - First cell of magic input field is not focused on clicking 'Didn't receive a magic code' link #22258 (comment)
• [@zanyrenney] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/299930

[MariaHCD]

Let's update the existing regression test here. Specifically, I've just added steps 12 & 13

Online

1. Navigate to https://staging.new.expensify.com/
2. In the email field, enter a gmail email address for a new account
3. Press continue
4. Verify there's a welcome message - "It's always great to see a new face..."
5. Verify there’s a message saying that a Magic Code has been sent to the email address
6. Verify there’s a button to resend the Magic Code
7. Navigate to the email inbox of the account and open the validation email
8. Copy the code
9. Enter a incorrect the code in the magic code field
10. Verify there's a user friendly message that the code is incorrect or to request a new code
11. Verify the field turns red and the user is unable to proceed
12. Wait for `Request magic code in xx:xx` timer to finish and click on the `Request a new code` option.
13. Verify that the error is cleared, the field is no longer red and the first input of the magic code input is focused

[HezekielT]

@MariaHCD

12. Wait for Request magic code in xx:xx timer to finish and click on Didn't receive magic code? option.

I think this step of the regression test should be changed to

12. Wait for 'Request magic code in xx:xx' timer to finish and click on 'Request a new code' option.

We show Request a new code if there is an error, but if there is no error we show the Didn't receive magic code? text as you can see below.

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 293 in ed21fda

{hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')}

[MariaHCD]

Nice catch, @HezekielT! Updated.

[zanyrenney]

Added the issue for the regression test.

[zanyrenney]

#22258 (comment) as per this comment, creating an upwork job specifically for reporting bonus.

[zanyrenney]

Invited you: https://www.upwork.com/jobs/~011861274c564ee819 @Natnael-Guchima

[Natnael-Guchima]

Invited you: https://www.upwork.com/jobs/~011861274c564ee819 @Natnael-Guchima

I have applied to the job. Thanks @zanyrenney

[zanyrenney]

Offer sent!

[Natnael-Guchima]

Accepted the offer. Thank you.

[zanyrenney]

That is all paid!