[Needs Checklist] Bank account input fields are disabled and empty

[m-natarajan]

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.1.12-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @sosek108
Slack conversation (hyperlinked to channel name): #Open Source

Action Performed:

1. Create two Workspaces with USD currency
2. Go to Workspace 1 > Workflows > Connect bank Account
3. Click on Connect Manually
4. Fill routing number and account number and click Next
5. Close form
6. Go to Workspace 2 and repeat the process
7. Return to Workspace 1
8. Go to Workflows > Connect bank account
9. Click Continue setup
10. Return back two times
11. Click Continue setup again

Expected Result:

Form is filled with user inputted data

Actual Result:

1. Input fields are empty
2. Input fields are disabled
3. User CANNOT continue the process

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Nagranie.z.ekranu.2025-03-12.o.11.05.51.mov

Recording.1050.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[m-natarajan]

Proposal by @sosek108

The problem lies in ReimbursementAccountPage component. When user clicks button to continue there are two actions perfomed simultaneously:

1. property at ONYXKEYS.REIMBURSEMENT_ACCOUNT is modified via Onyx.merge
2. newly rendered component Manual subscribes to this property via useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT)
   1. the value is used to populate form values
   2. according to react-native-onyx package’s comment useOnyx will return undefined in case of pending merge actions.
   3. the form is initialized with undefined values.
   4. The form’s disabled state updates correctly once the proper Onyx value is returned, but forms are initialized only once so the new Onyx value is not being used, leading to an inconsistent user experience.
      To solve that issue we will wait for merge action to complete before rendering form components via using Promise’s then function.
      Before:

setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) // this method will call `Onyx.merge`
setShouldShowContinueSetupButton(false);
setUSDBankAccountStep(currentStep); // this will cause render of form components

After:

setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL).then(() => {
	setShouldShowContinueSetupButton(false);
	setUSDBankAccountStep(currentStep);
});

[sosek108]

Pull request