[$500] Web - Bank Account - Error is shown when clicking on name field

[izarutskaya]

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

---

Version Number: v1.4.3-6
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
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation: @

Action Performed:

1. Go to settings > Workspace > choose a works space(currency should be USD)
2. Bank account > Connect Manually
3. Fill in the details of steps 1 and 2 then go to step 3
4. Click on the first name field. and enter your name. Notice that clicking on the field does not bring an error.
5. After filling in the First Name click on the Last Name field and notice that an error is shown

Expected Result:

Clicking on a Name field does not cause an error

Actual Result:

Clicking on a name field causes an error

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6290099_1700897846157.test16_Name_field_error.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f83b7fb2dea297a0
• Upwork Job ID: 1728902330154385408
• Last Price Increase: 2023-11-26

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f83b7fb2dea297a0

[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

[melvin-bot]

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

[unidev727]

Proposal

from: @unicorndev-727

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

Error is shown when clicking on name field.

What is the root cause of that problem?

The root cause is because getDefaultStateForField returns empty value for the fields that doesn't enter any value before and if any input lost focus, validate function will be called so that an empty value error shows.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Line 248 in d985a0e

getDefaultStateForField(fieldName, defaultValue = '') {

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

We can disable shouldValidateOnBlur in Form Provider.

App/src/pages/ReimbursementAccount/RequestorStep.js

Lines 136 to 143 in d985a0e

	<FormProvider
	formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
	submitButtonText={translate('common.saveAndContinue')}
	validate={validate}
	onSubmit={submit}
	style={[styles.mh5, styles.flexGrow1]}
	scrollContextEnabled
	>

to

<FormProvider
                formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
                submitButtonText={translate('common.saveAndContinue')}
                validate={validate}
                onSubmit={submit}
                style={[styles.mh5, styles.flexGrow1]}
                scrollContextEnabled
                shouldValidateOnBlur={false}
            >

What alternative solutions did you explore? (Optional)

I'm not sure if this mechanism is intentional and we need to update.

[Tony-MK]

Proposal

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

Error is shown when clicking on name field

What is the root cause of that problem?

Note: Apart from the last name field, the problem seems to also be reproduced with different fields such as dob, personal address, SSN, city, and zip code. Hence, these other fields also need to be addressed.

The root cause of the problem is that by default the FormProvider component validates the value in the field when the OnBlur event occurs because the default value for the shouldValidateOnBlur prop is set to true.

App/src/components/Form/FormProvider.js

Lines 89 to 91 in d985a0e

	validate: () => {},
	shouldValidateOnBlur: true,
	shouldValidateOnChange: true,

This extra validation seems unnecessary because the form will also be validated when the onInputChange and the onValueChange events occur due to the fact the FormProvider has shouldValidateOnChange set by default to true. Hence, the fields will be validated adequately before submission. Below are the two additional locations where the fields get validated individually.

App/src/components/Form/FormProvider.js

Lines 282 to 284 in d985a0e

	if (shouldValidateOnBlur) {
	onValidate(inputValues, !hasServerError);
	}

App/src/components/Form/FormProvider.js

Lines 300 to 302 in d985a0e

	if (shouldValidateOnChange) {
	onValidate(newState);
	}

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

Apply, shouldValidateOnBlur={false}, to any applicable input components in the IdentityForm such as the last name, dob, SSN, personal address, city, and zip code. Possibly add it to any other inputs in the forms in ReimbursementAccountPage that are applicable. Changing the shouldValidateOnBlur boolean will force the form to skip the unnecessary validation on the onBlur event occurs.

[tsa321]

Proposal

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

Error is shown when clicking on name field

What is the root cause of that problem?

App/src/components/Form/FormProvider.js

Lines 277 to 285 in d985a0e

	setTimeout(() => {
	if (relatedTargetId && _.includes([CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID, CONST.OVERLAY.TOP_BUTTON_NATIVE_ID, CONST.BACK_BUTTON_NATIVE_ID], relatedTargetId)) {
	return;
	}
	setTouchedInput(inputID);
	if (shouldValidateOnBlur) {
	onValidate(inputValues, !hasServerError);
	}
	}, 200);

The root cause is because of setTimeout on the onBlur function above.
When user fill first name then lastName is pressed it will setTouchedInput(inputID) of lastName immediately and will be validated when the setTimeout of the onBlur of first name triggered.

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

We could remove the setTimeout of the onBlur, because I have tried to change focus from textinput to checkbox and removing the settimeout will not produce the issue of the comment of the setTimeout. Maybe because react native web update effect.
So the code could be:

- setTimeout(() => { 
     if (relatedTargetId && _.includes([CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID, CONST.OVERLAY.TOP_BUTTON_NATIVE_ID, CONST.BACK_BUTTON_NATIVE_ID], relatedTargetId)) { 
         return; 
     } 
     setTouchedInput(inputID); 
     if (shouldValidateOnBlur) { 
         onValidate(inputValues, !hasServerError); 
     } 
- }, 200);

---

additionally if we want to follow the guideline of form validation in :
https://github.com/Expensify/App/blob/main/contributingGuides/FORMS.md#validate-on-blur-on-change-and-submit

to validate onBlur first then onInputChange if user comeback to the input.
We could remove setTouchedInput(inputID); in onTouched, onPress and onPressin in FormProvider.js

[abzokhattab]

Proposal

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

Error is shown on the first touch of the required fields

What is the root cause of that problem?

'

Within the code snippet found at this link, we validate the input values. This process involves two key functions:

1. getFieldRequiredErrors: This function examines whether any of the required values in the input are empty. If it detects any empty values, it returns the corresponding errors.

2. validate function: Triggered by the onBlur event, as specified here, the validate function encompasses the execution of getFieldRequiredErrors. The onBlur event occurs when a user clicks on the first field, then clicks on another field, or shifts focus away from the currently selected field. Consequently, the validate function is invoked, internally calling getFieldRequiredErrors. In the specific scenario described, if the second field remains empty, getFieldRequiredErrors generates errors.

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

what we want to do is to prevent the isRequired erros on the first touch of any field:

1. to do that, we need to disable the isRequired errors for the current touched field, so we should add a third arg to the getFieldRequiredErrors function, which is the focusField:
   and exclude the errors of that field as follows:

function getFieldRequiredErrors(values: OnyxCommon.Errors, requiredFields: string[], focusedField: string) {
    const errors: OnyxCommon.Errors = {};
    requiredFields.forEach((fieldKey) => {
        if (isRequiredFulfilled(values[fieldKey]) || (focusedField && fieldKey === focusedField)) {
            return;
        }
        errors[fieldKey] = 'common.error.fieldRequired';
    });
    return errors;
}

2. update the validate args to

const validate = (values, focusedField) => {
    const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS, focusedField);

3. finally in the FormProvider, add a new ref var that saves the current touched field:

    const touchedInputId = useRef(null);

also inside the onValidate update the validate call to:

const validateErrors = validate(values, touchedInputId.current) || {};

also set the touchedInputId in the onTouched onPressed onPressIn functions:

touchedInputId.current = inputID;

finally in the onBlur function add an else statement to this condition and set the touchedInputId to null in case the focus is moved if (Visibility.isVisible() && Visibility.hasFocus()) {:

   } else {
                        touchedInputId.current = null;
                    }

POC:

Screen.Recording.2023-11-27.at.3.08.41.AM.mov

[situchan]

Dupe of #31570

[johncschuster]

Good callout, @situchan! Let's close this issue in favor of #31570.

[tsa321]

@situchan @alitoshmatov just to confirm, Is the issue's video is the expected result?