[$500] Bank Account - Arrow next to bank account selector is not clickable

[lanitochka17]

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.31-3
Reproducible in staging?: Y
**Reproducible in production?:**No, unable to check prod
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:

Issue found when executing PR #35032

Action Performed:

1. Log in to New Expensify
2. Click on profile icon in LHN
3. Navigate to wallet > Add Bank account > Personal bank account
4. Select at least 2 accounts in Plaid flow, and finish the flow
5. Click on arrow pointing downwards next to Account field

Expected Result:

Account dropdown with the list of available bank accounts should open

Actual Result:

Clicking on arrow does not open or close the dropdown

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

Add any screenshot/video evidence

Bug6353486_1706117422056.2024-01-24_17-14-08.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eace76bf2cf18311
• Upwork Job ID: 1752351557704245248
• Last Price Increase: 2024-01-30
• Automatic offers:
• aimane-chnaif | Contributor | 28134305

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

[neonbhai]

This is an issue with all pickers in the app and has existed before.

Also reproducible on prod with Distance Rate Unit Picker:

Screen.Recording.2024-01-25.at.2.07.17.AM.mov

not a deploy blocker

cc: @Julesssss

[Krishna2323]

Proposal

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

Bank Account - Arrow next to bank account selector is not clickable

What is the root cause of that problem?

This is a bug in react-native-picker-select package. lawnstarter/react-native-picker-select#237

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

We can solve it by adding zIndex:-1 to the icon container and by making the RNPickerSelect transparent and applying the background colour to the parent view.

Result

arrow_click.mp4

[dragnoir]

Proposal

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

Arrow not pressable

What is the root cause of that problem?

The issue is within the <Picker> component, the use of the native component <RNPickerSelect> where an issue already exist as mentioned here lawnstarter/react-native-picker-select#237

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

Change the <Picker> component with a new page. When user click on the dropdown, a new page with the list of options will be opened. Like we do for the other options:

2024-01-25.15.34.47.mp4

<MenuItemWithTopDescription
                    title={------}
                    description={props.translate('-------')}
                    shouldShowRightIcon
                    disabled={-------}
                    onPress={() => Navigation.navigate(ROUTES.-------)}
                />

[Krishna2323]

I think we had decided to place the rate & unit input on the same page, thats why we use Picker.

[dragnoir]

Then we need to fix it, it's a bad design on web currently

[Krishna2323]

Although we can but this issue is not about design. But I don't there is an issue because it has been always like this..

[dragnoir]

A solution that fix the issue and make the UI better is preferable :)

[Krishna2323]

Going off the original issue topic isn't a solution😄

[dragnoir]

@Krishna2323 how can you

adding zIndex:-1 to the icon

if the icon is from a native module where you don't have access to edit it!!!

[Krishna2323]

I tested on all platforms and it works just fine, we already have access to the icon container where we apply the absolute positioning styles and pointerEvents none. Let C+ decide first...

[dragnoir]

@Krishna2323 from the doc of the component styling https://github.com/lawnstarter/react-native-picker-select#styling
You can't apply the style you mentioned on all the platforms. Your solution will not work on all devices.

[Krishna2323]

https://github.com/lawnstarter/react-native-picker-select?tab=readme-ov-file#icon

[Krishna2323]

If it doesn't work on android, this will work.
https://stackoverflow.com/a/60125566
But I don't think this issue is on android native.

Pls wait on for C+.

[dragnoir]

Yes your ptoposal does not work on Android even with the workaround you mentioned.

The QA lmentioned above that this issue is within Android: Native also.

[Krishna2323]

I can't reproduce on android & ios native. I think, we already solved the android issue with the solution prop provided by the picker select repo.

Pls wait on for C+ decision instead of trying to prove my solution wrong.

[Krishna2323]

@jules @thienlnam, can we make this external now?

[aimane-chnaif]

We had experienced this in the past while working on dark theme for picker component.
PR: #14984, especially this change
But seems like happening again.

[aimane-chnaif]

If making external, happy to take this as C+ as I already have context

[melvin-bot]

@Julesssss Huh... This is 4 days overdue. Who can take care of this?

[neonbhai]

This is a visually transparent element, applying bg color again is unnecessary. This also helps us solve the problem without touching native platform styles. Let C+ decide here, thanks!

[Krishna2323]

backgroundColor isn't unnecessary.

App/src/components/LocalePicker.tsx

Line 49 in 3ab4e6e

backgroundColor={theme.signInPage}

[neonbhai]

Hey, @Krishna2323! The bg color is applied on a visually transparent area, On the UI, this is without bounding boxes, and the picker always mirrors the color of the page. Applying bg color again is unnecessary here.

This simplifies the picker element for App, also mirror the original source coming from our own fork of react-native-picker-select here. We render the touchable inputs over the icon, and visual elements.

Since the picker was not designed in app and comes from a fork, proposal here points to the minimal changes to required to fix this.

I appreciate your concerns but let C+ decide here, thank you!

[Krishna2323]

@neonbhai, even if we don't need bg here (which I'm sure that is needed https://github.com/Expensify/App/pull/14984/files#diff-8ab8ba45ab927f1430b8d1209d187e003a9cdfe476f809e4483ef64cdba253ebR601), I would still say what matters here is the solution, which is to move the icon container behind the input, by putting zIndex to -1 or 1. Your proposal came after mine which uses the same general approach as mine, bg is totally optional thing if that needs to be changed.

Lets wait for @aimane-chnaif's decision.

[aimane-chnaif]

Thanks for the discussions everyone. I will update shortly

[melvin-bot]

@Julesssss, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[aimane-chnaif]

None of proposed solutions work on Windows.
Awaiting proposals...

[dragnoir]

@aimane-chnaif do you want a solution to fix ?

[aimane-chnaif]

I don't think we should deprecate Picker and change to push-to-page.
@dragnoir this is still being used in signin language picker.

[Krishna2323]

@aimane-chnaif, i think it work on windows as well, can you pls recheck 🙏, we also need to se background for options

bandicam.2024-02-12.15-54-53-962.mp4

[aimane-chnaif]

@Krishna2323 still your solution is just to add zIndex: -1, right?

[Krishna2323]

Yes

[aimane-chnaif]

@Krishna2323 I retested but that still causes regression.
Arrow icon disappears.

[Krishna2323]

@aimane-chnaif, you need to set the background color of the picker to transparent, as mentioned in my proposal

[aimane-chnaif]

@Krishna2323 still your solution is just to add zIndex: -1, right?

You said Yes so I am confused.

Please share testing branch

[Krishna2323]

I meant my solution also includes zIndex: -1 😅, sharing a test branch...

[dragnoir]

@aimane-chnaif pls check #34849

The team and the contributors are on the path to replace the <Picker> with the <MenuItemWithTopDescription> due to the bugs and issues related to <Picker>

On of the update is here:
c4cdb9b#diff-18437544a71e140db50db4634f86560cda6a7f0af85c5d1ae4b4d9a2da1c0334L155

This was about the Unit component and when I tested this issue the app was using the Picker.

I think it's better to use a better component and make the UI consistent better than having the Pciker with all the bugs and seeking a workaround to edit it. What do you think?

You mentioned we already use the Picker in oither places! I think we are going on a path to replace all of those with <MenuItemWithTopDescription>

[aimane-chnaif]

@dragnoir what about signin language picker?

[dragnoir]

@aimane-chnaif this one ?

Ther'is no issue there with the arrow icon, it's clickable without issue.

[aimane-chnaif]

@aimane-chnaif this one ?

Ther'is no issue there with the arrow icon, it's clickable without issue.

Interesting. What's the difference between small picker and larger picker?

[dragnoir]

@aimane-chnaif all Picker are now working perfectly. Seems something with the last cleans on the patches.

20240213_121551.mp4

I think we can close this issue if it's just relevant to the click issue. But it's better to use the new component <MenuItemWithTopDescription> to make the app consistent between all screens and the login page language dropdown is working perfectly.

[aimane-chnaif]

Indeed fixed in #36117 (merged today)

@Julesssss I think we can close this as fixed unless we're going to refactor to push-to-page

[Julesssss]

Thanks all

I think we can close this as fixed unless we're going to refactor to push-to-page

That's going to need to be a separate discussion I think