[$1000] mweb/Safari - Workspace - Invite button in invite message page hides behind keyboard

[lanitochka17]

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: 1.4.16-4
Reproducible in staging?: Y
Reproducible in production?: Y
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to Settings > Workspaces > any workspace
2. Go to Members > Invite
3. Select any member > Next
4. Focus on the invite message field

Expected Result:

The Invite button will move above the keyboard

Actual Result:

The Invite button is hidden behind the keyboard. In order to show the invite button while keyboard is open, user has to scroll down the page

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

Bug6324978_1703346993790.RPReplay_Final1703346401.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014e381cef3b4dde0b
• Upwork Job ID: 1738596942038294528
• Last Price Increase: 2024-02-19
• Automatic offers:
• situchan | Contributor | 28078003
• paultsimura | Contributor | 28107877

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[paultsimura]

Proposal

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

The "Invite" button hides behind the keyboard.

What is the root cause of that problem?

The system keyboard visibility is not handled properly on the WorkspaceInviteMessagePage.

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

We should add the shouldEnableMaxHeight property to the ScreenWrapper here:

App/src/pages/workspace/WorkspaceInviteMessagePage.js

Lines 131 to 134 in b74be72

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID={WorkspaceInviteMessagePage.displayName}
	>

What alternative solutions did you explore? (Optional)

[aim-salam]

Proposal

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

Invite button in invite message page (Workspace) should appear on top keyboard, not hide behind keyboard.
( mweb/Safari - Workspace - Invite button in invite message page hides behind keyboard )

What is the root cause of that problem?

=> WorkspaceInviteMessagePage.js

shouldEnableMaxHeight is not set to true in ScreenWrapper's component.

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

=> WorkspaceInviteMessagePage.js

Just add shouldEnableMaxHeight as true to ScreenWrapper's prop.

What alternative solutions did you explore? (Optional)

[tienifr]

Proposal

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

The Invite button is hidden behind the keyboard. In order to show the invite button while keyboard is open, user has to scroll down the page

What is the root cause of that problem?

We have 2 problems here:

1. The invite button is behind keyboard
   We did not enable shouldEnableMaxHeight in WorkspaceInvitePage, so the maxHeight is undefined -> the invite button can't be shown
2. The header disappear
   We did not set marginTop for ScreenWrapper

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

1. Enable shouldEnableMaxHeight
2. subscribe withViewportOffsetTop and add style={[{marginTop: props.viewportOffsetTop}]} in ScreenWrapper like what we did in ReportScreen

        <ScreenWrapper
            includeSafeAreaPaddingBottom={false}
            testID={WorkspaceInviteMessagePage.displayName}
            shouldEnableMaxHeight
            style={[{marginTop: props.viewportOffsetTop}]}
        >

What alternative solutions did you explore? (Optional)

NA

We can subscribe withViewportOffsetTop in ScreenWrapper and add the new flag (shouldUseViewportOffsetTop) to enable [{marginTop: props.viewportOffsetTop}] to its style

Result

Screen.Recording.2023-12-25.at.17.59.18.mov

[Santhosh-Sellavel]

@anmurali Unassigning this one due to low bandwidth please assign a new C+ here, thanks!

[situchan]

I can take over

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

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

[melvin-bot]

@anmurali 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[anmurali]

@situchan assigned to you. Can you review the proposals and pick one?

[melvin-bot]

@anmurali @situchan 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!

[situchan]

All proposed to enable shouldEnableMaxHeight. I am checking if this doesn't cause any side effect.

[anmurali]

Discussing the proposal, not overdue.

[suneox]

I have a demo structure for this concern before apply into code, we need change a current form structure and virtual viewport when focusing

trim.A681236E-F791-49E0-828B-F3BCE1FBE4C6.MOV

[melvin-bot]

@madmax330, @anmurali, @situchan Eep! 4 days overdue now. Issues have feelings too...

[madmax330]

@shawnborton @situchan thoughts on the above?

[shawnborton]

Hmm this might be on purpose though since the invite message could potentially be quite long? Basically I think we did that to prevent having a moving/growing text input potentially grow to be below the fixed submit button. So I'm actually not sure if this is a bug, it might be intended behavior and thus we could close it out.

[shawnborton]

Curious if @Expensify/design has an opinion though. I think we don't have a bulletproof approach for these kinds of bottom-of-the-view buttons.

I had long advocated for a system where if there is enough vertical space, the button stays in view docked to the bottom of the screen. But if the content above the button became long, it would push the button down and out of view. I think we did implement this kind of thing correctly on some of the profile details pages (like your display name), but not sure if that works well everywhere else.

[dannymcclain]

@shawnborton I'm not sure I have much to add here—bottom-docked and then anchored to the top of keyboard feels pretty standard for buttons like this, but I'm honestly having a little trouble following this thread.

[shawnborton]

All good! I guess my thinking is that when we anchor a big button to the top of the keyboard, we don't really give the user too much space to scroll in their viewport. Then if we add a scrollable/growing element in that remaining small space - in this case, it's a textarea that grows with a long invite message - I feel like we kinda set the user up for a tricky UI to interact with.

That being said, you could argue that keeping the button fixed to the keyboard makes it so that you don't have to worry about awkward scroll issues to be able to submit.

[dannymcclain]

Ahh I see what you're saying!

Now I understand and agree with your comment here:

if there is enough vertical space, the button stays in view docked to the bottom of the screen. But if the content above the button became long, it would push the button down and out of view

If we implemented behavior like that, couldn't we also update the keyboard "go" button (I don't know what it's called, I'll point it out in a screenshot) to reflect whatever action is in the big green button (that would in this case be out of view)?

[shawnborton]

If we implemented behavior like that, couldn't we also update the keyboard "go" button (I don't know what it's called, I'll point it out in a screenshot) to reflect whatever action is in the big green button (that would in this case be out of view)?

Yes! Big fan of that.

[melvin-bot]

@madmax330, @anmurali, @situchan Eep! 4 days overdue now. Issues have feelings too...

[anmurali]

Are we fixing this in #35380 @situchan? Or vice versa?

[situchan]

Are we fixing this in #35380 @situchan? Or vice versa?

No, it's different issue

[situchan]

What's the next step here?
Do nothing or something to fix?

[wildan-m]

@situchan @paultsimura I am unable to replicate the bug mentioned here with the latest main version. I believe adding shouldEnableMaxHeight alone should work fine.

Kapture.2024-03-27.at.09.21.57.mp4

[suneox]

On my proposal also explain why before this PR merge shouldEnableMaxHeight doesn't work. Currently, the page structure also updated so we don't need to trigger scrollIntoView after resetScrollPositionOnVisualViewport

Based on the latest structure we should update submitButtonStyles for WorkspaceInviteMessagePage at FormProvider instead of trigger scrollIntoView after resetScrollPositionOnVisualViewport to avoid the bottom action button hidden by the keyboard on small screen devices look like the POC

So i would like to update proposal based on the latest code structure

Proposal

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

mweb/Safari - Workspace - Invite button in invite message page hides behind keyboard

What is the root cause of that problem?

WorkspaceInviteMessagePage doesn't set shouldEnableMaxHeight and the submit button at FormProvider doesn't have a correct style

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

Add shouldEnableMaxHeight to WorkspaceInviteMessagePage and add submitButtonStyles into FormProvider to make sure works on small screen devices

<ScreenWrapper
            includeSafeAreaPaddingBottom={false}
            testID={WorkspaceInviteMessagePage.displayName}
+           shouldEnableMaxHeight
        >

Update style of FormProvider at this line to

    <FormProvider
        style={[styles.flexGrow1, styles.ph5]}
+       submitButtonStyles={{marginTop: 0}}

Without submitButtonStyles	With submitButtonStyles

What alternative solutions did you explore? (Optional)

If we want the bottom always snap to bottom and change the scroll behavior look like this comment (only scroll on middle content, skip header and footer) we will change the FormWrapper structure

[situchan]

@suneox thanks for the proposal but I wonder if this issue should just be closed as "do nothing" based on feedback from @Expensify/design.

@madmax330 what do you suggest?

[madmax330]

Yeah I think we should just close