[$500] mWeb - Bank account - Page scrolls to the top when tapping on a field

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v1.4.41-2
Reproducible in staging?: Y
Reproducible in production?: N
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:

Pre-requisite: the user must be logged in and have created a workspace.

1. Go to Workspace > Bank account.
2. Select "Connect manually".
3. Tap on any of the fields.
4. Verify the page scrolls to the top.

Expected Result:

The focus should remain on the selected field.

Actual Result:

The page scrolls to the top.

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

Bug6378780_1707868962144.Hzic1986_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f9f343288d7d26ba
• Upwork Job ID: 1757590702622396416
• Last Price Increase: 2024-02-14
• Automatic offers:
• fedirjh | Reviewer | 0
• akinwale | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f9f343288d7d26ba

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @miljakljajic (Bug), see https://stackoverflow.com/c/expensify/questions/14418 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.

[melvin-bot]

Auto-assign attempt failed, all eligible assignees are OOO.

[jeremy-croff]

Proposal

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

We want the keyboard not to overlap the input selected

What is the root cause of that problem?

The keyboard is not adjusting the height to the margin on the screen. As well as the input validation errors.

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

We can make a simple change to update the margin to padding, so that the input doesn't get covered by the keyboard

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

Line 137 in 023d62c

<View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>

updating mt3 style to pt3

What alternative solutions did you explore? (Optional)

[andreasnw]

Proposal

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

component didn't automatically adjust its height and position while the virtual keyboard is displayed.

What is the root cause of that problem?

the BankInfo component's maximum height is set to 100%, which means it can't adjust or scroll beyond the screen

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

Lines 126 to 131 in 023d62c

	<ScreenWrapper
	testID={BankInfo.displayName}
	includeSafeAreaPaddingBottom={false}
	shouldEnablePickerAvoiding={false}
	shouldEnableMaxHeight
	>

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

remove the shouldEnableMaxHeight props from the ScreenWrapper component on BankList page.

        <ScreenWrapper
            testID={BankInfo.displayName}
            includeSafeAreaPaddingBottom={false}
            shouldEnablePickerAvoiding={false}
        >

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.

[miljakljajic]

@fedirjh any thoughts on the above?

[fedirjh]

Looking

[fedirjh]

This is related to #34498

cc @MrMuzyk

[mountiny]

@MrMuzyk @barttom could have a look

[mountiny]

Looking at the bug this is not a blocker, rather a minor inconvenience they can still scroll and see the field just fine.

[melvin-bot]

📣 @fedirjh 🎉 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]

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

[andreasnw]

Hi, sorry, I'm pretty new here and feeling a bit lost. Is there something off about my suggestion? And why is it assigned to someone else? @mountiny @fedirjh 😃

[mountiny]

@andreasnw Hello! Sorry for the confusion.

This issue has been raised as a regression to a specific PR which was linked above. In such cases, per the contributor guidelines the PR author should be in charge of fixing it as well as the C+ (@akinwale) who has reviewed the original PR.

So in these cases we will prefer them to fix this issue as they already got paid for their work. In case they will use your solution provided, we can reward you with partial payment for help.

I hope this helps

[andreasnw]

Got it @mountiny, thank you!

[Swor71]

Hey I'm Marcin from Callstack - expert contributor group - I'd like to work on this issue

[mountiny]

@Swor71 will tackle this tomorrow

[Swor71]

fixed in: #37032

[andreasnw]

this pull request #37032 has the same solution that I came up with earlier #36461 (comment). any chance i could get some compensation for this @mountiny ?

[mountiny]

@andreasnw sorry, this was a follow up to feature Callstack agency worked on and it was starightforward solution, I wont complicate this further, sorry we have mislabelled this as help wanted when agency was supposed to handle this