[HOLD #18244] Not all the magic code input dashes are red when error appears

[kavimuru]

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. Open the app
2. Open settings
3. Open profile
4. Open contact method
5. If you have pending verfication of contact, click on it OR add new email or phone number and reopen that contact
6. Without writing any code, click on verify and observe that input for 1st digit is displayed in green and for rest digits, it is displayed in red
7. Sign out of the app
8. Insert any email or phone number and continue
9. Without inserting magic code, click on Sign in and observe that input of all digits are displayed in red

Expected Result:

App should display all the digit input in red if there is any error during contact method verification

Actual Result:

App displays 1st digit input in green and rest in red if we click on verify without inserting any code and 'Please enter your magic code' is triggered

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.25-3
Reproducible in staging?: y
Reproducible in production?: y
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

inconsistent.error.display.verify.contact.mp4

Recording.905.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685873935586999

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @kevinksullivan (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

[dukenv0307]

Proposal

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

App should display all the digit input in red if there is any error during contact method verification

What is the root cause of that problem?

The Green dash style on focus is come from here
Currently, we prioritize using focus border style if it's focused.

In login verification and contact method verifycation, we are using the same component MagicCodeInput. In login verification, we will call this.inputValidateCode.blur() in function validateAndSubmitForm , and in here will run hook to set focusedIndex = undefined. But in contact method verification, we don’t call blur function. So in login verification will all the digit input in red and contact method will not

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

We need to add a blur function in here and it's will be run logic in here to set focusedIndex = undefined

        if(inputValidateCodeRef.current){
            inputValidateCodeRef.current.blur();
        }

Result

Screen.Recording.2023-06-07.at.01.10.58.mov

[namhihi237]

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

App should display all the digit input in red if there is any error during contact method verification

What is the root cause of that problem?

After pressing submit the app displays 1st digit input in green because after submitting the app is still focusing on the current input. It results in the input being blue because the style styles.borderColorFocus

App/src/components/MagicCodeInput.js

Line 309 in 96adb8e

focusedIndex === index ? styles.borderColorFocus : {},

Use magic code:

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

Lines 123 to 133 in 96adb8e

	<MagicCodeInput
	autoComplete={props.autoComplete}
	ref={inputValidateCodeRef}
	label={props.translate('common.magicCode')}
	name="validateCode"
	value={validateCode}
	onChangeText={onTextInput}
	errorText={formError.validateCode ? props.translate(formError.validateCode) : ErrorUtils.getLatestErrorMessage(props.account)}
	onFulfill={validateAndSubmitForm}
	autoFocus
	/>

After submitting and returning an error we haven’t unfocus it yet:

App/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

Lines 106 to 119 in 96adb8e

	const validateAndSubmitForm = useCallback(() => {
	if (!validateCode.trim()) {
	setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'});
	return;
	}
	if (!ValidationUtils.isValidValidateCode(validateCode)) {
	setFormError({validateCode: 'validateCodeForm.error.incorrectMagicCode'});
	return;
	}
	setFormError({});
	User.validateSecondaryLogin(props.contactMethod, validateCode);
	}, [validateCode, props.contactMethod]);

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

We will update the function validateAndSubmitForm when an error occurs then unfocus input:

const  validateAndSubmitForm  =  useCallback(() => {
	if (!validateCode.trim()) {
		setFormError({ validateCode: ‘validateCodeForm.error.pleaseFillMagicCode’ });
		inputValidateCodeRef.current.blur();
		return;
	}
	if (!ValidationUtils.isValidValidateCode(validateCode)) {
		setFormError({ validateCode: ‘validateCodeForm.error.incorrectMagicCode’ });
		inputValidateCodeRef.current.blur();
		return;
	}
	setFormError({});
	User.validateSecondaryLogin(props.contactMethod, validateCode);
}, [validateCode, props.contactMethod]);

Result:

Screen.Recording.2023-06-08.at.07.13.00.mov

What alternative solutions did you explore? (Optional)

N/A

[alitoshmatov]

I think it is related to #18244 , and solution of that issue will resolve this one too, since that issue will gurantee that when clicking outside of magic input, magic input will be blurred

[Santhosh-Sellavel]

@kevinksullivan Can you add hold here please.

[kevinksullivan]

Updated @Santhosh-Sellavel

[melvin-bot]

@kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kevinksullivan]

Still held.

[kevinksullivan]

Still held

[melvin-bot]

@kevinksullivan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[kevinksullivan]

Held

[melvin-bot]

@kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kevinksullivan]

Held, and making this weekly as the relevant GH is still in planning.

[melvin-bot]

This issue has not been updated in over 15 days. @kevinksullivan eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[kevinksullivan]

held on #18244

[kevinksullivan]

held

[melvin-bot]

@kevinksullivan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@kevinksullivan 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[kevinksullivan]

still on hold

[melvin-bot]

@kevinksullivan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kevinksullivan]

held

[kevinksullivan]

Closing unless we see it again