[HOLD for payment 2024-10-04][PAY][$250] Empty space below the "Next" button when we open the page, and the button does not keep its position above the keyboard

[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.0.28-0 Reproducible in staging?: Y Reproducible in production?: Y 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: @rayane-djouah Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725318514200989

Action Performed:

1. Open the app and log in
2. Navigate to settings > Switch to Expensify Classic
3. Select any reason and proceed to the next screen

Expected Result:

The next button should be correctly positioned above the keyboard

Actual Result:

Empty space below the "Next" button when we open the page, and the button does not keep its position above the keyboard

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [x] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/fec90ee3-b08c-4ca2-94a7-6093befc7eee

https://github.com/user-attachments/assets/a981f569-e099-46a4-90b5-1cd26a0eb507

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021832067388388096796
• Upwork Job ID: 1832067388388096796
• Last Price Increase: 2024-09-06
• Automatic offers:
• DylanDylann | Reviewer | 103992082

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot[bot]]

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

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-09-03 13:13:24 UTC.

Proposal

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

Empty space below the "Next" button when we open the page, and the button does not keep its position above the keyboard

What is the root cause of that problem?

We haven't set shouldEnableMaxHeight on the screen wrapper here https://github.com/Expensify/App/blob/e60b8210a1f5a2471d8aa9d84d0e461774b791d6/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx#L100

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

enable max height on the screen wrapper in exit survey response page

            shouldEnableMaxHeight

We can also make same fixes in other exit survey page (or other pages) with the same problem

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

There are lot of empty spaces below the button in exit survey response page.

What is the root cause of that problem?

When the keyboard is shown, we don't resize the page height. We have a shouldEnableMaxHeight prop to do it, but we aren't using it for the exit survey page. https://github.com/Expensify/App/blob/5db0996d52d9c59a8570538a4601dffbca70395c/src/components/ScreenWrapper.tsx#L155

https://github.com/Expensify/App/blob/5db0996d52d9c59a8570538a4601dffbca70395c/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx#L121-L122

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

Enable the max height by passing the shouldEnableMaxHeight prop to the page ScreenWrapper. https://github.com/Expensify/App/blob/5db0996d52d9c59a8570538a4601dffbca70395c/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx#L121-L122

We can apply the same solution to any page that has the same issue.

[suneox]

This issue seems related to the virtual viewport on mWeb, which I resolved several months ago.

[rayane-djouah]

@kevinksullivan - Can I get assigned as C+ since I reported the bug?

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

@kevinksullivan, @DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[DylanDylann]

On my list today

[DylanDylann]

@bernhardoj Is there any difference between your proposal and @FitseTLT's proposal?

[DylanDylann]

@FitseTLT

We can also make same fixes in other exit survey page (or other pages) with the same problem

@bernhardoj

We can apply the same solution to any page that has the same issue.

Which page has the same issue?

[DylanDylann]

@FitseTLT Please follow the rule

https://github.com/Expensify/App/blob/172504115675f5c6aad87fe4e96e8166b2183b14/contributingGuides/CONTRIBUTING.md?plain=1#L103-L110

[FitseTLT]

@FitseTLT Please follow the rule

https://github.com/Expensify/App/blob/172504115675f5c6aad87fe4e96e8166b2183b14/contributingGuides/CONTRIBUTING.md?plain=1#L103-L110

@DylanDylann I only made a minor change and a minor note to check for similar problems and fix in PR phase that's why I didn't notify for update

[bernhardoj]

@bernhardoj Is there any difference between your proposal and @FitseTLT's proposal?

None, proposals are posted almost at the same time (1ms difference) https://api.github.com/repos/Expensify/App/issues/comments/2326480424 https://api.github.com/repos/Expensify/App/issues/comments/2326480465

Which page has the same issue?

I write this in case there is other cases found when working on the PR, but I just found that it happens in the console page too.

We can apply the same solution to any page that has the same issue.

https://github.com/user-attachments/assets/005a9a48-18bf-424e-a270-8cc326b70b14

[DylanDylann]

Thanks, everyone. The solution is straightforward. Although @FitseTLT goes first, the difference is only one second. I still lean toward @bernhardoj's proposal because he provides more detailed information and presents it more clearly than @FitseTLT's original proposal. One more thing, @bernhardoj also point out the same bug on the console page.

Anyway, I will leave the final decision to the internal engineer

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @roryabraham, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[FitseTLT]

@FitseTLT

We can also make same fixes in other exit survey page (or other pages) with the same problem

@DylanDylann I just wrote this to indicate we can fix similar problems in other pages in PR phase, for instance, with a short researching I found similar problem in Report Participants page but we will find more cases in PR phase

https://github.com/user-attachments/assets/740b15a2-6ec3-4390-ba89-83f092921c4a

I have proposed the same solution first @DylanDylann there is no reason to select the second proposal.

@roryabraham please consider reviewing the decision above I have stated the same solution first and equally indicated more cases to be dealt with (as ReportParticipantsPage) but the reviewer is chosing the second proposal. Thx

[kevinksullivan]

Waiting on the internal stamp of approval. I am going OOO so I'm looping in another member of BZ

[melvin-bot[bot]]

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

[DylanDylann]

Point 1:

I have proposed the same solution first @DylanDylann there is no reason to select the second proposal.

@FitseTLT I think we shouldn't encourage posting a sketchy and brief proposal as soon as possible and then updating it later. Keep in mind that @bernhardoj’s proposal came just one second after yours, but it is clearer and more detailed. He also explains why using shouldEnableMaxHeight will address the issue effectively.

Point 2:

@DylanDylann I just wrote this to indicate we can fix similar problems in other pages in PR phase

I expect we can address it in the proposal because I see many cases where contributors missed that in the PR phase

Point 3:

for instance, with a short researching I found similar problem in Report Participants page

I don't see the same problem in Report Participants page as you mentioned

https://github.com/user-attachments/assets/b1636ff7-53ef-498c-9a81-7fa3ba98a0d6

Anyways, Let's waiting for @roryabraham to give the final decision

[roryabraham]

thanks everyone, just seeing this but it's late for me. I'll review tomorrow

[FitseTLT]

I don't see the same problem in Report Participants page as you mentioned

@DylanDylann The problem occurs when there is a text input in the page and to achieve that you need to have > 8 participants as indicated in my video.

[melvin-bot[bot]]

@puneetlath, @kevinksullivan, @roryabraham, @DylanDylann Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

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

[roryabraham]

I agree with @DylanDylann's evaluation (though, none of the proposals really explain the root cause, only that it's a known thing and we have a prop to fix it. Both RCAs are just repeating the solution).

[melvin-bot[bot]]

@puneetlath @kevinksullivan @roryabraham @bernhardoj @DylanDylann this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[DylanDylann]

@bernhardoj Waiting for PR

[puneetlath]

@bernhardoj do you have an ETA?

[bernhardoj]

Sorry, I was sick. PR is now ready

cc: @DylanDylann

[roryabraham]

PR was deployed to prod 2024-09-27, so it's ready to pay.

[puneetlath]

@DylanDylann can you complete the checklist?

[DylanDylann]

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:

[@DylanDylann] The PR that introduced the bug has been identified. Link to the PR: NA [@DylanDylann] 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: NA [@DylanDylann] 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: NA [@DylanDylann] Determine if we should create a regression test for this bug. Yes [@DylanDylann] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Open Settings > Switch to Expensify Classic
2. Select any reason and proceed to the next screen
3. Focus on the input field and verify the button is positioned above the keyboard
4. Now, open Settings > Troubleshoot
5. Enable Client side logging
6. Press View debug console
7. Focus on the input field and verify the button is positioned above the keyboard

Do we agree 👍 or 👎

[puneetlath]

Great, thanks.

Payment summary:

• C - $250 - @bernhardoj - to be paid via NewDot
• C+ - 250 - @DylanDylann - paid via Upwork

Thanks everyone!

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj