App: [HOLD for payment 2022-11-29] [$250] First field is not focused after clicking the fix the errors link on Connect Manually page reported by @parasharrajat

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:

Open the app on web.
Go to Settings.
Click on any workspace(if there are not workspace create new).
Go to Connect Bank Account menu.
Select Connect Manually.
Press save & Continue without entering any information on any field.
fix the errors shows up above the save & continue button.
Click on the link.
Observe that all the fields are red but focus is set to Account number Field even if there is a error field above it.

Expected Result:

Focus should be set on Routing Number field.

Actual Result:

When all fields are errored, focus is not set on the first field called Routing Number.

Workaround:

unknown

Platform:

Where is this issue occurring?

Web
iOS
Android
Desktop App
Mobile Web

Version Number: 1.2.22-3 Reproducible in staging?: y Reproducible in production?: y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: image (1) https://user-images.githubusercontent.com/43996225/199597236-7faabc85-1baf-4b22-ba6c-05bf4aa06abc.mp4 Expensify/Expensify Issue URL: Issue reported by: @parasharrajat Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1665921536612629

View all open jobs on GitHub

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 42 (28 by maintainers)

Most upvoted comments

@parasharrajat Bonus was active on issue hires made after Nov 4. As we can see they are hired on Nov 11 Friday. Merged within the next 3 business days i/e by Nov 16. So it’s eligible for a bonus!

Santhosh-Sellavel on Dec 5, 2022

Proposal

Root cause: https://github.com/Expensify/App/blob/0724337138a4d80f6603074cc9af5c186cb524ec/src/components/Form.js#L231 This picks first item of errors json. This means focus priority depends on keys sorting in errors. This is incorrect. Focus priority should depend on keys sorting in this.inputRefs <=> views order (from top to bottom) i.e. on Connect bank account page, these are priority order in view: Routing number, Account number, Terms

Solution: find inputRef by looping this.inputRefs from first to last which has the error

                            onFixTheErrorsLinkPressed={() => {
-                               this.inputRefs[_.first(_.keys(this.state.errors))].focus();
+                               const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(this.state.errors).includes(key));
+                               this.inputRefs[focusKey].focus();
                            }}

0xmiroslav on Nov 6, 2022

@michaelhaxhiu @zanyrenney refunded

0xmiroslav on Dec 6, 2022

@zanyrenney applied. Please assign me on Github as well. Thanks

0xmiroslav on Nov 15, 2022

@rushatgabhane Yeah, we can update the way we focus on field in: https://github.com/Expensify/App/blob/25c306015d7b08fec915e6005cde7c928bdc847e/src/components/Form.js#L230-L232

 onFixTheErrorsLinkPressed={() => { 
-      this.inputRefs[_.first(_.keys(this.state.errors))].focus(); 
+     this.findFirstError()
 }}

 findFirstError = () => {
        const errorArrays = _.keys(this.state.errors);
        const inputArrays = _.keys(this.inputRefs);
        let currentFocusKey = null;
        _.every(inputArrays, (currentFieldKey) => {
            const errorIndex = _.indexOf(errorArrays, currentFieldKey);
            if (errorIndex !== -1) {
                currentFocusKey = currentFieldKey;
                return false;
            }
            return true;
        });
        if (currentFocusKey) {
            this.inputRefs[currentFocusKey].focus();
        }
    }

https://user-images.githubusercontent.com/16502320/200165724-be9565ef-c4ae-40e2-bfbd-9400640aae25.mov

hungvu193 on Nov 6, 2022