[$1000] Routing Number shows an error before typing anything

[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- Click on your avatar
2- click on Worspaces option
3- select any workspace
4- Click on bank account option
5- click on Connect manually
6- Close the keyboard without typing anything

Expected Result:

Routing Number shouldn't show any error before typing ( Account Number works perfectly)

Actual Result:

Routing Number shows an error before typing anything

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.49-0
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

Screen_Recording_20230730-163338.mp4

Recording.1430.mp4

Expensify/Expensify Issue URL:
Issue reported by: @mejed-alkoutaini
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690724240140599

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c0ac78d2c9b90a4f
• Upwork Job ID: 1686753426700144640
• Last Price Increase: 2023-08-02

[melvin-bot]

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

The issue is that the Routing Number field in the form shows a validation error prematurely when the keyboard is closed without entering any input.

What is the root cause of that problem?

The root cause is the inconsistency between the initial values of inputValues and lastValidatedValues.current. When the form is rendered, inputValues for a field is set to an empty string if it is undefined, but lastValidatedValues.current for that field remains undefined.

App/src/components/Form.js

Lines 98 to 104 in 577152d

	const [inputValues, setInputValues] = useState({...props.draftValues});
	const formRef = useRef(null);
	const formContentRef = useRef(null);
	const inputRefs = useRef({});
	const touchedInputs = useRef({});
	const isFirstRender = useRef(true);
	const lastValidatedValues = useRef({...props.draftValues});

App/src/components/Form.js

Lines 268 to 271 in 577152d

	// We want to initialize the input value if it's undefined
	if (_.isUndefined(inputValues[inputID])) {
	inputValues[inputID] = defaultValue || '';
	}

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

One solution is to set lastValidatedValues.current to an empty string as well if it is undefined for a field. This can be done in the childrenWrapperWithProps function like so:

if (_.isUndefined(inputValues[inputID])) {
    inputValues[inputID] = defaultValue || '';
    if (_.isUndefined(lastValidatedValues.current[inputID])) {
        lastValidatedValues.current[inputID] = defaultValue || '';
    }
}

This change ensures that inputValues and lastValidatedValues.current are consistent when the form is initially rendered, which will prevent the form from showing a premature validation error for the Routing Number field.

This logic can also be done out of this callback function when the values are initially being set

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[hanzalahsamana]

Proposal,

I am submitting my proposal to resolve the "Routing Number" error display issue in the FormAlertWrapper component. The current problem displays an error message prematurely, even before any user input. To address this, I will make the following changes:

Conditional Error Rendering: I will update the FormAlertWrapper to show error messages only when there are validation issues or when users attempt to submit incomplete forms.

Enhanced Offline Handling: The component will handle offline scenarios gracefully, displaying appropriate messages to inform users about their connection status.

Accessibility & Localization: I will ensure that the error messages are accessible and support multi-language localization.

My goal is to deliver a polished solution that improves the user experience by providing accurate error feedback and seamless form interactions.

I am excited to collaborate on this project and welcome any specific preferences or additional requirements you may have.

Thank you for considering my proposal. I am eager to contribute to your project's success.

Best regards,
Hanzalah Imran

[melvin-bot]

📣 @hanzalahsamana! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>