[HOLD for payment 2023-03-01] Black area generated above keyboard within company information form

[kavimuru]

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

---

Action Performed:

1. Open any workspace > Reimburse expenses > Connect bank account > Connect Manually >
2. Enter Routing Number: 123123123
3. Enter Account Number: 1111222233331111
4. Click Continue, it will show Company Information form.
5. Fill up the Company information form one by one field, it will generate black area above keyboard in iOS Safari and Chrome as shown in video.

Expected Result:

Black area should not generated above keyboard.

Actual Result:

It will show black area above keyboard as we fill up the form.

Workaround:

unknown

Platforms:

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

• iOS / Safari and Chrome

Version Number: 1.2.63-0
Reproducible in staging?: y
Reproducible in production?: Could not check
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
Notes/Photos/Videos:

Company-Info-BlackArea.mov

PLBJ7173.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @PrashantMangukiya
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1675181285781359

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012f40a9a8f065b869
• Upwork Job ID: 1620853123237179392
• Last Price Increase: 2023-02-01

[ArekChr]

I would like to investigate this issue, Callstack.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~012f40a9a8f065b869

[melvin-bot]

Current assignee @puneetlath is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Current assignee @puneetlath is eligible for the External assigner, not assigning anyone new.

[puneetlath]

Thanks @ArekChr! Looking forward to your proposed solution.

[mo-4444]

Your issue is in this file

{maxHeight: this.props.windowHeight}]}

https://github.com/Expensify/App/blob/93854081336980a19b02138a271fead29b37e5d9/src/components/ScreenWrapper/index.js

[dhairyasenjaliya]

Proposal

• I think this is a regression from PR Fix: iOS button obstructed by keyboard #14392 & issue [HOLD for payment 2023-03-02] [$3000] mWeb/safari - Create Group button is hidden by keyboard when selecting participants #11463 whereby we are adding maxHeight to <ScreenWrapper> to prevent the button from hiding but on Form pages, we dont really have the floating button which creates blank height to prevent that in all form page where every we used <ScreenWrapper> we need to set null height

Solution 1

• Manually pass windowHeight={null} to all <ScreenWrapper> used in all form pages (ReimbursementAccount) (all steps pages) and all pass null to pages that are affected (will need to check affected pages as current GH is only for company steps)

Example

+    <ScreenWrapper windowHeight={null} includeSafeAreaPaddingBottom={false}>  

Solution 2

• Define new props example: allowFloatButton to <ScreenWrapper> component by default we should be kept as false and pass allowFloatButton={true} on those affected pages which have the bottom button for example this 2 PR we have 2 different pages whereby we should pass true [HOLD for payment 2023-03-02] [$3000] mWeb/safari - Create Group button is hidden by keyboard when selecting participants #11463 ,[$2000] mWeb - Chat - The send icon is hidden by the keyboard #14161

• We also need to check which other pages we need to have a floating button

Result

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-02-02.at.14.08.31.mp4

[mountiny]

@parasharrajat Would you be able to look at the proposed solutions?

[parasharrajat]

Yeah, as soon as I start working today.

[parasharrajat]

I think this is a regression from #14392. cc: @mananjadhav @sobitneupane can you please handle RCA?

@puneetlath Please close the Upwork job. This should be fixed by the author of the main PR.

[parasharrajat]

IMO, we should revert the PR #14392 as there are two regressions from that PR. In any way, We will have to revert the changes on that PR to solve this regression.

[mountiny]

Would it require removing the MaxHeight property or is the regression in the upstream repo update?

[parasharrajat]

Yeah, removing MaxHeight will fix it. or we have to be intelligent while setting its value. When keyboard opens max height will reduce to a small viewport.

[mountiny]

@rawalyogendra Would you be able to look into this regression fix? 🙇

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.75-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: iOS autoscroll when <input/> is focused #15100

If no regressions arise, payment will be issued on 2023-03-01. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[MelvinBot]

📣 @MelvinBot! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[MelvinBot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav / @puneetlath] The PR that introduced the bug has been identified. Link to the PR: Fix: iOS button obstructed by keyboard #14392
• [@mananjadhav / @puneetlath] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Fix: iOS button obstructed by keyboard #14392 (comment)
• [@mananjadhav / @puneetlath] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@rawalyogendra] Propose regression test steps to ensure the same bug will not reach production again.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mananjadhav]

@rawalyogendra Can you please update with the Regression Test Proposal here?

[rawalyogendra]

1. BUG: Black area generated above keyboard within company information form

• Proposed Test Steps:
  • Open a workspace > Reimburse expenses > Connect bank account > Connect Manually
  • Enter Routing Number: 123123123
  • Enter Account Number: 1111222233331111
  • Click on Continue, it shows Company Information form.
  • Fill up the Company information form.
  • Verified that it did not generate black area above keyboard in iOS Safari and Chrome.

2. BUG: The Close account button is cut off and has extra padding

• Proposed Test Steps:
  • Go to staging.new.expensify.com
  • Login with any account
  • Navigate to Settings > Security
  • Click on "Close Account"
  • Enter the email in the input and open keyboard
• Do we agree 👍 or 👎

[MelvinBot]

📣 @rawalyogendra! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[mananjadhav]

@puneetlath this has the title for payment, but there won't be any payout for this one. Instead it should be #11463.

[puneetlath]

Yes, makes sense. Thanks for reminding me. I'm going to go ahead and close this out in favor of that issue.

[PrashantMangukiya]

@puneetlath reporting bonus not issued for this. As I reported this issue.

[MelvinBot]

📣 @PrashantMangukiya! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[MelvinBot]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[puneetlath]

My apologies @PrashantMangukiya. Can you please apply to the Upwork job? https://www.upwork.com/jobs/~012f40a9a8f065b869

[PrashantMangukiya]

Thank you @puneetlath Applied for the job.

[puneetlath]

Reporting bonus paid. Closing again.

[PrashantMangukiya]

Received. Thank you @puneetlath

[s77rt]

We are looking for another fix to this issue as the approved proposal caused a regression #16082 (comment).