[$250] Android - Disabled bank detail input field flickers when navigating back

[IuliiaHerets]

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: 9.0.53-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Issue was found when executing this PR: #51234
Email or phone of affected tester (no customers): nathanmulugetatesting+1937@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Open NewDot hybrid app
2. Create a workspace
3. Enable workflows
4. Start manual bank account connection flow
5. On the first step enter routing number and account number and click on next
6. Go back to the previous page and observe the input fields

Expected Result:

Disabled input fields without flickering is observed

Actual Result:

Disabled input fields flicker

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6643768_1729719575459.Screen_Recording_20241024_003426.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021871546683215081160
• Upwork Job ID: 1871546683215081160
• Last Price Increase: 2025-01-14

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot]

Triggered auto assignment to @youssef-lr (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[youssef-lr]

Checking

[melvin-bot]

@youssef-lr, @jliexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[youssef-lr]

No update, low priority

[melvin-bot]

@youssef-lr, @jliexpensify Huh... This is 4 days overdue. Who can take care of this?

[jliexpensify]

@youssef-lr - want to make this a Weekly if it's lower priority?

[melvin-bot]

@youssef-lr, @jliexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@youssef-lr, @jliexpensify, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

[abdulrahuman5196]

Hi @jliexpensify , Sorry, I am still not able to get this through. I don't want to delay this issue. Kindly re-apply the label for different C+. Unassigning myself.

[melvin-bot]

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

[jliexpensify]

Hi @ishpaul777 - can you help us with this issue? We've got some proposals - thanks!

[ishpaul777]

will revieew today 🙇

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[huult]

Edited by proposal-police: This proposal was edited at 2025-01-08 16:13:55 UTC.

Proposal

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

Disabled bank detail input field flickers when navigating back

What is the root cause of that problem?

When we return from the personal info section, the value of reimbursementAccount changes three times. The first and last times, reimbursementAccount has a value, while the second time, reimbursementAccount is undefined.

App/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx

Line 25 in ebba967

const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);

With that, the condition to disable the input is determined by the reimbursementAccount data, where it alternates between disable being true, then false, and then true again, which has caused this issue to occur.

App/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx

Line 36 in ebba967

const hasBankAccountData = !!(reimbursementAccount?.achData?.bankAccountID ?? '');

App/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx

Line 89 in ebba967

disabled={hasBankAccountData}

App/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx

Line 102 in ebba967

disabled={hasBankAccountData}

The reimbursementAccount is undefined, which indicates that the response data is incomplete.

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

To resolve this issue, we need to ensure that the component waits for the reimbursementAccount data to fully load by checking the isLoadingOnyx status. If isLoadingOnyx is true, skip updating while the data is still loading

App/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx

Line 66 in ebba967

    const [reimbursementAccount, reimbursementAccountResult] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
    const [hasBankAccountData, setHasBankAccountData] = useState(!!(reimbursementAccount?.achData?.bankAccountID ?? ''));

    useEffect(() => {
        if (isLoadingOnyxValue(reimbursementAccountResult)) {
            return;
        }

        setHasBankAccountData(!!(reimbursementAccount?.achData?.bankAccountID ?? ''));
    }, [reimbursementAccount?.achData?.bankAccountID, reimbursementAccountResult]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This issue UI bug no need the test

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[jliexpensify]

Bumping @ishpaul777 for reviews please! Thanks.

[ishpaul777]

apologies for delay here, i have been strugling to run android app locally on my Dev enviornment past few days but now its solved I'll review proposal soon

[ishpaul777]

is this still reproducable i could not reproduce

Screen.Recording.2025-01-10.at.3.21.22.PM.mov

[jliexpensify]

Hmm the PR was from October - lets get Applause to re-test

[melvin-bot]

@youssef-lr, @jliexpensify, @ishpaul777 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jliexpensify]

Waiting on a re-test, labels updated

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[jliexpensify]

Nice, that confirms what @ishpaul777 is seeing - closing this.