[HOLD for payment 2023-08-21] [$1000] Contact Method – Input dashes remain red, instead turning to grey upon deletion of any number.

[kavimuru]

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. Open your profile.
2. Click on "Contact methods".
3. Click on "New contact method".
4. Add a new contact and proceed to the next step.
5. Enter an invalid magic code to trigger an error, causing the dashes to turn red.
6. Delete any number.
7. Notice that the dashes remain red, while in other sections, they turn to grey upon deleting any number.

Expected Result:

The dashes should turn to grey upon deletion of a number, similar to how it works in other sections.

Actual Result:

The dashes remain red upon deleting any number, while in other sections, they turn to grey

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.46-2
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

Bug.mp4

Recording.1373.mp4

Expensify/Expensify Issue URL:
Issue reported by: @usmantariq96
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690438628680299

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016c5402df1f6143e0
• Upwork Job ID: 1684857239303507968
• Last Price Increase: 2023-08-04
• Automatic offers:
• fedirjh | Reviewer | 26031002
• hoangzinh | Contributor | 26031005

[melvin-bot]

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

[ygshbht]

Proposal

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

When deleting a number from an invalid magic code in the 'Contact methods' section, the input dashes remain red instead of turning grey as is the behavior in other sections.

What is the root cause of that problem?

The root cause of the problem is that the current implementation does not clear the error once the input is changed. The error state is retained, and therefore the dashes remain red.

onChangeText={onTextInput}

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

Lines 131 to 143 in 975146f

	<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)}
	hasError={!_.isEmpty(validateLoginError)}
	onFulfill={validateAndSubmitForm}
	autoFocus
	shouldDelayFocus={shouldDelayFocus}
	/>

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

To solve this issue, we need to introduce functionality to clear the error when the input changes. This can be done by modifying the onChangeText function in the following way:

onChangeText={(...args) => {
    User.clearContactMethodErrors(props.contactMethod, 'validateLogin');
    onTextInput(...args);
}}

By doing so, we ensure the error state is cleared whenever the input changes, making the behavior consistent with other sections.

[spcheema]

Proposed solution

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

Contact Method – Input dashes remain red, instead turning to grey upon deletion of any number.

What is the root cause of that problem?

Based on the current implementation, whenever a user enters an incorrect magic code, the app shows an error and updates validateLogin in Onyx data (loginData). Based on that it shows an error red dot on the user profile to indicate an error.

Now the same error info is used to show an error indicator to magic code inputs even if the input is empty.

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

There are two options to consider:

Option 1:

If we still want to keep the red dot on the user profile and hide the red border from hiding input along with the error message then

• Show red border only when there magic input text length equal to MAGIC_CODE_LENGTH and a user has validateLogin error
• Show error message as-is

On BaseValidateCodeForm.js update onInputChange callback.

Option 2:

Clear validateLogin data from OnyxData it'll hide the following:

• Remove the red border from magic code input fields
• Remove error message Failed to validate contact method with given magic code. Please request a new code and try again.
• Remove the red dot from the profile as well

BaseValidateCodeForm.js

Call User.clearContactMethodErrors(props.contactMethod, 'validateLogin') on input change callback.

I think validateLogin is intentionally prevented from being cleared (unless a user refresh page) to give a user indication that there is an error related to the profile.

But that error clears whenever a user refresh the page and onyx data sync with API response.

What alternative solutions did you explore? (Optional)

N/A

I don't find any value considering the red dot does clean on refresh unless I misunderstood. May be clear the error from Onyx on input change.

Proposal

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

Error is shown as soon as app is put in background when creating a task.

What is the root cause of that problem?

The root cause of this problem is that after once errorFields of loginList[contactMethod] in Onyx Data is set, we didn't clear the errorFields when the invalid magic code is updated or any number is deleted.

In the original code, the hasError property of the MagicCodeInput component is true even if we update the invalid magic code or delete the any number after once errorFields is set.

Below code snippets shows how the hasError property is set as true:

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

Line 75 in 975146f

const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');

App/src/libs/ErrorUtils.js

Lines 97 to 109 in 975146f

	function getEarliestErrorField(onyxData, fieldName) {
	const errorsForField = lodashGet(onyxData, ['errorFields', fieldName], {});
	if (_.isEmpty(errorsForField)) {
	return {};
	}
	return _.chain(errorsForField)
	.keys()
	.sortBy()
	.map((key) => ({[key]: errorsForField[key]}))
	.first()
	.value();
	}

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

Line 139 in 975146f

hasError={!_.isEmpty(validateLoginError)}

And in the original code there is no code snippet that clear the errorFields when the invalid magic code is updated or any number is deleted. Because of this the hasError property keep the value(true) even invalid magic code is updated or any number is deleted.

And then if hasError property of the MagicCodeInput component is set as true, dash's color set as red cause of below code snippet:

App/src/components/MagicCodeInput.js

Line 320 in 975146f

props.hasError || props.errorText ? styles.borderColorDanger : {},

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

In my little opinion, we should add the code that clear the errorFields of loginList[contactMethod] in Onyx Data when the invalid magic code is updated or any number is deleted.

When the magic code is changed onTextInput function invoked.
So We can add the User.clearContactMethodErrors(props.contactMethod, 'validateLogin') in the onTextInput function.

We can modify the onTextInput like this:

const onTextInput = useCallback(
        (text) => {
            setValidateCode(text);
            setFormError({});

+           User.clearContactMethodErrors(props.contactMethod, 'validateLogin')

            if (props.account.errors) {
                Session.clearAccountMessages();
            }
        },
        [props.account.errors],
    );

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016c5402df1f6143e0

[melvin-bot]

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

[melvin-bot]

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