Log in - Digit selector won't auto jump

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Fill in email address
3. Type in an incorrect magic number
4. Click on the first digit and input the code again

Expected Result:

The digit selector should jump to the next digit in case you want to type in more than one digit after filling it incorrectly

Actual Result:

You can only edit the digit you have clicked on

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.73-0

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Bug6209433_bandicam_2023-09-21_23-03-26-211.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 @isabelastisser (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

[Tushu17]

Proposal

Problem

The digit selector doesn't advance to the next input; instead, it submits the form when a user edits existing text.

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

To resolve this issue, We can add a check within the validateAndSubmit function. This check will ensure that the form is not submitted prematurely when the last entered digit is not in the last input field.

App/src/components/MagicCodeInput.js

Lines 117 to 121 in 4ea4a55

	const validateAndSubmit = () => {
	const numbers = decomposeString(props.value, props.maxLength);
	if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
	return;
	}

       
-       if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
+       if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline || focusedIndex !== 5) {

What alternative solutions did you explore? (Optional)

none

[isabelastisser]

I believe this is expected behavior to allow the user to edit one incorrect digit at a time. Closing!