Inconsistent checkbox's behaviour on bank account page

[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. settings > workspace > connect bank > manually
2. without entering routing no. and bank account no, tick the checkbox.
3. Now fill the details on this page and move to the next
4. here also, tick the checkbox without filling any detail

Expected results:

app should show form errors both the time

Actual results:

app shows form error on routing no. page but not on the second page

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
• [x] MacOS / Chrome / Safari
• [x] MacOS / Desktop

Version Number: 1.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 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43996225/234705428-0c5c8b88-e9c7-47d8-8b7f-0191b8611067.mp4

https://user-images.githubusercontent.com/43996225/234705446-0a88c194-b93a-4501-893f-b32f94e4eecf.mp4

Expensify/Expensify Issue URL: Issue reported by: @chirag-arora Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682370165287669

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• [x] 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
• [x] 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.
• [x] 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.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[hungvu193]

I can say this is a dupe Similar issue reported here: https://github.com/Expensify/App/issues/13211 cc @trjExpensify

[trjExpensify]

That issue is closed though @hungvu193. Is there a regression here?

[hungvu193]

I couldn't seem to reproduce the problem in the first video, I still can check the checkbox in the first time while routing number field is focused.

https://user-images.githubusercontent.com/16502320/235075254-bfc9e4f2-d6ad-4363-96d1-90084967b48e.mov

About second video, when user navigate to Company Screen and check the checkbox, there's no error because there wasn't any field was focused.

[honnamkuan]

Posting proposal early as per new guidelines

Proposal

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

When Connect Bank Account page is accessed, the topmost field Routing number has autofocus enabled, upon ticking the accept ToS checkbox, the Routing number input goes out of focus, which trigger form validation, and error shown.

Upon filling up Connect Bank Account input fields correctly and clicking Next, Company Information page is shown, however this time none of the fields get auto focused, when user scroll to the bottom and tick on I can confirm this company is not on the list of restricted businesses checkbox, no field validation are triggered, hence there is no error message shown. The behaviour between the 2 pages are not consistent.

What is the root cause of that problem?

Connect Bank Account page routing number autofocus behaviour was introduced in pull#12513, however it is not applied to the topmost field in Company Information page, that is why the 2 pages are not behaving inconsistently.

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

We should makes behaviour for the pages consistent by enable autoFocus prop and configure shouldDelayFocus prop

https://github.com/Expensify/App/blob/c3c86d30dcec18aa0c1a11e2a8f2e97339dcdeab/src/pages/ReimbursementAccount/CompanyStep.js#L182C31-L190

e.g.

    <TextInput
        autoFocus
        shouldDelayFocus={shouldDelayFocus}
        label={this.props.translate('companyStep.legalBusinessName')}
        inputID="companyName"
        ...
        ...
    >

Note: shouldDelayFocus value is imported from src/libs/shouldDelayFocus

Note: shouldDelayFocus will be true for Android native only, it is meant to delay focusing the text inputs for the keyboard to open up.

What alternative solutions did you explore? (Optional)

N/A

[sonialiap]

The behavior I'm seeing is that a field being marked in red is not dependent on clicking the checkbox, it's dependent on you clicking into the field, leaving it blank, and clicking out of it.

The reason the routing number field is highlighted when you click the checkbox is because your cursor is immediately placed in the field. But if you then click into the account number field and click out of it, it also gets highlighted in red. The same behavior is observed on the next page. For example, if I click into the phone number field and then out without entering a number, it gets highlighted in red. Clicking the checkbox is only relevant because it's an action that's taking the cursor out of the text field.

Conclusion: all fields behave the same way. Required fields are accurately marked in red if clicked into and not filled in before clicking out of them. If you try to click "Save and Continue" without filling out all fields, they all get marked in red. I do not think there is a bug here. Things are behaving as I would expect them to.

https://user-images.githubusercontent.com/17131195/235708084-fa26c91e-e19b-4a22-a5aa-265ffd504873.mov