[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
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

363339995-8a2d711e-ef96-416e-a8f2-e5af1059c8d6.mp4

RPReplay_Final1725367824.MP4

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]

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

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 100 in e60b821

<ScreenWrapper testID={ExitSurveyResponsePage.displayName}>

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.

App/src/components/ScreenWrapper.tsx

Line 155 in 5db0996

const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 121 to 122 in 5db0996

	return (
	<ScreenWrapper testID={ExitSurveyResponsePage.displayName}>

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.

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 121 to 122 in 5db0996

	return (
	<ScreenWrapper testID={ExitSurveyResponsePage.displayName}>

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]

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

[melvin-bot]

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

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

App/contributingGuides/CONTRIBUTING.md

Lines 103 to 110 in 1725041

	7. Refrain from leaving additional comments until someone from the Contributor-Plus team and / or someone from Expensify provides feedback on your proposal (do not create a pull request yet).
	- Do not leave more than one proposal.
	- Do not make extensive changes to your current proposal until after it has been reviewed.
	- If you want to make an entirely new proposal or update an existing proposal, please go back and edit your original proposal, then post a new comment to the issue in this format to alert everyone that it has been updated:
	```
	## Proposal
	[Updated](link to proposal)
	```

[FitseTLT]

@FitseTLT Please follow the rule

App/contributingGuides/CONTRIBUTING.md

Lines 103 to 110 in 1725041

	7. Refrain from leaving additional comments until someone from the Contributor-Plus team and / or someone from Expensify provides feedback on your proposal (do not create a pull request yet).
	- Do not leave more than one proposal.
	- Do not make extensive changes to your current proposal until after it has been reviewed.
	- If you want to make an entirely new proposal or update an existing proposal, please go back and edit your original proposal, then post a new comment to the issue in this format to alert everyone that it has been updated:
	```
	## Proposal
	[Updated](link to proposal)
	```

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

console.mp4

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

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

2024-09-10.18-15-50.mp4

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

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

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

[melvin-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]

@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