[$500] Bank Account - Cursor in Routing number shown in "Account number"switching background to foreground

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.3.99-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
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

Launch app
Tap profile icon
Tap Workspaces----Workspace
Tap Bank account---Update to USD currency
Tap connect manually
Paste routing number
Keep cursor in Account number
Background the app
Copy the account number
Foreground the app

Expected Result:

When cursor placed in account number, and kept app in background and again bringing foreground, app cursor must be in the same "Account number" field.

Actual Result:

When cursor placed in "account number", and kept app in background and again bringing foreground, app cursor is in "routing number" field instead of "Account number".

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6277183_1700044938994.bgm.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~014a1de3bb375306db
Upwork Job ID: 1724770607844880384
Last Price Increase: 2023-11-22
Automatic offers:

getusha | Reviewer | 27951576
dukenv0307 | Contributor | 27951578

Job added to Upwork: https://www.upwork.com/jobs/~014a1de3bb375306db

@trjExpensify

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

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

@getusha

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

Proposal

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

Bank Account - Cursor in Routing number shown in "Account number"switching background to foreground

What is the root cause of that problem?

We're checking isLoading using isLoadingReportData

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Lines 400 to 401 in 8872311

    
           const isLoading = 
        
               (this.props.isLoadingReportData || this.props.account.isLoading || this.props.reimbursementAccount.isLoading) &&

When users comeback from background to foreground, we will call API ReconnectApp that makes isLoadingReportData is true

-> Connect bank account page is unmounted
-> Loading indicator is shown

When isLoadingReportData comes false, Connect bank account page is mounted again and the routing number is focused (by default)

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

We should check isLoadingReportData to show the loading indicator at the first time

Update isLoadingReportData default value to true like what we did in other places.
In here add new state

        hasReportDataLoaded = !this.props.isLoadingReportData

Update it in componentDidUpdate

 if(!this.state.hasReportDataLoaded && !this.props.isLoadingReportData){
           this.setState({
                hasReportDataLoaded:true
            })
        }

Use !this.state.hasReportDataLoaded in here instead of isLoadingReportData

Result

Screen.Recording.2023-11-15.at.20.35.08.mov

Proposal

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

Cursor in Routing number shown in "Account number"switching background to foreground

What is the root cause of that problem?

After we come back from the background, ReconnectApp API is called which makes this.props.isLoadingReportData is true. So the first step component is unmounted and then after loading is completed, the first input is focused by default.

App/src/pages/ReimbursementAccount/ReimbursementAccountPage.js

Line 401 in 8872311

    
           (this.props.isLoadingReportData || this.props.account.isLoading || this.props.reimbursementAccount.isLoading) &&

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

We should replace IS_LOADING_REPORT_DATA with IS_LOADING_APP which will only be true when OpenApp API is called and rename isLoadingReportData prop by isLoadingApp. That can prevent loading is shown when the user comes back from the background.

What alternative solutions did you explore? (Optional)

@nkuoch

Hm, I'm not sure it's worth making a change here. @nkuoch @MariaHCD I assume there's a pretty good reason why we show the loader here on the bank account page?

@trjExpensify

@trjExpensify But I don't think showing the loading indicator whenever users background then foreground is the good idea. We have nothing to load.

@joelbettner

@joelbettner can you review this proposal please so we can move to a PR? Thanks!

@dukenv0307

@dukenv0307's proposal looks good to me.

@getusha

📣 @getusha 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

@dukenv0307

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

@getusha

@getusha The PR is ready for review

@trjExpensify

@trjExpensify PR was deployed to production 2 weeks a go, seems like automation failed.

@getusha

Hey, back from the festive break! Confirming payments as follows:

$500 - @getusha for the C+ review
$500 - @dukenv0307 for the fix.

Settled up, closing!

Navigation Menu

Repository navigation

[$500] Bank Account - Cursor in Routing number shown in "Account number"switching background to foreground #31363

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

Result

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

22 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const isLoading =
	(this.props.isLoadingReportData \|\| this.props.account.isLoading \|\| this.props.reimbursementAccount.isLoading) &&

[$500] Bank Account - Cursor in Routing number shown in "Account number"switching background to foreground #31363

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 15, 2023

melvin-bot commented on Nov 15, 2023

melvin-bot commented on Nov 15, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Nov 15, 2023

tienifr commented on Nov 15, 2023

Proposal

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

What is the root cause of that problem?

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

Result

dukenv0307 commented on Nov 15, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

trjExpensify commented on Nov 15, 2023

tienifr commented on Nov 16, 2023

22 remaining items

trjExpensify commented on Dec 4, 2023

joelbettner commented on Dec 4, 2023

melvin-bot commented on Dec 4, 2023

melvin-bot commented on Dec 4, 2023

dukenv0307 commented on Dec 5, 2023

getusha commented on Dec 25, 2023

trjExpensify commented on Jan 3, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions