[ON HOLD PAYMENT 4/29][$250] BA - Missing "Routing number" and "Account number" title after revisiting Bank info page

[izarutskaya]

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.4.62-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Profile > Workspaces > any workspace.
3. Go to Workflows.
4. Go to Connect bank account.
5. Enter both routing and account number > Next.
6. Tap Next on confirmation page.
7. Tap Back button on the top left.

Expected Result:

"Routing number" and "Account number" title will not disappear.

Actual Result:

"Routing number" and "Account number" title disappears after revisiting Bank info page.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6445387_1712809549572.RPReplay_Final1712809060.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0190119f6b1d854619
• Upwork Job ID: 1778353045189038080
• Last Price Increase: 2024-04-11
• Automatic offers:
• paultsimura | Reviewer | 0
• tienifr | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[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.

[izarutskaya]

@CortneyOfstad I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #collect project.

[izarutskaya]

Production

RPReplay_Final1712819480.MP4

[tienifr]

Proposal

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

"Routing number" and "Account number" title disappears after revisiting Bank info page.

What is the root cause of that problem?

When the input is disable, we have the logic to add backgroundColor to input

App/src/components/TextInput/BaseTextInput/index.native.tsx

Line 356 in 260a7de

inputProps.disabled && styles.textInputDisabled,

App/src/styles/index.ts

Line 899 in 260a7de

backgroundColor: theme.highlightBG,

And its bg color hide the label so we don't see the label

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

We should add zIndex: 1 to styles of TextInputLabel

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-04-11.at.15.13.47.mov

[Julesssss]

Not a blocker. Solution sounds good to me. But I'm going OOO. Will be back Monday 22nd to review

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0190119f6b1d854619

[melvin-bot]

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

[Julesssss]

And its bg color hide the label so we don't see the label

@tienifr if the colours are set correctly, I don't see why the text is hidden beneath the inputText (in the z axis). Or is the input component built up of multiple components?

[paultsimura]

if the colours are set correctly, I don't see why the text is hidden beneath the inputText (in the z axis). Or is the input component built up of multiple components?

https://github.com/Expensify/App/blob/main/src/components/TextInput/BaseTextInput/index.native.tsx

The BaseTextInput has TextInputLabel and RNTextInput as separate components. They have different z-indexes on native platforms and on the web (hence the label hides on native).

@tienifr your proposal makes sense to me, and since it's not happening in prod, would you be able to point out the offending PR?

[tienifr]

@paultsimura I'm trying, but there's no luck. I'll give you that PR if I find out

[paultsimura]

I guess it might be related to the New Architecture PR since I did not find any particular change either 🤔

@Julesssss might that possibly be the case?

Anyway, let's proceed with @tienifr's proposal – it works well.
🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @Julesssss is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @paultsimura 🎉 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

[melvin-bot]

📣 @tienifr 🎉 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 📖

[CortneyOfstad]

PR is still being reviewed — will continue to keep an eye on this!

[paultsimura]

This was deployed to production on April 22, due payment 2024-04-29

[CortneyOfstad]

Payment Summary

@paultsimura — paid $250 via Upwork
@tienifr — paid $250 via Upwork