[$500] mWeb - Emoji skin tone selector is partially hidden when keyboard is in use

[kbecciv]

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: 1.4.33-2
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: Applause- Internal Team
Slack conversation:

Issue found when executing PR #34105

Action Performed:

1. Go to any chat
2. Tap Emoji picker
3. Tap on the search field

Expected Result:

Emoji skin tone selector is shown completely with no extra padding

Actual Result:

Emoji skin tone selector is hidden partially and can't be selected clearly.

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

Bug6360936_1706623482801.RPReplay_Final1706595388.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d87fc1c0cabdcd5e
• Upwork Job ID: 1752334064101212160
• Last Price Increase: 2024-01-30

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[divyanshugarg36]

Proposal

Please re-state the problem that we are trying to solve in this issue.
mWeb - Emoji skin tone selector is partially hidden when keyboard is in use

What is the root cause of that problem?

This looks like a CSS issue. Seems like the property used to align the viewport height of the emoji container is not working properly.

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

We can easily update the viewport property of the container responsible for the positioning of the emoji component. This will solve the issue

What alternative solutions did you explore? (Optional)

Another method to solve this could be with the help of spacing properties in CSS we can calculate the height of the trimmed area and add that height to the container bottom.

[situchan]

Same root cause as #35380

[joekaufmanexpensify]

Sounds good. Closing as this is a dupe of that issue!

[suneox]

Proposal

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

mWeb - Emoji skin tone selector is partially hidden when keyboard is in use

What is the root cause of that problem?

When emoji open we have a popoverInnerContainer set 95%

App/src/styles/index.ts

Lines 1624 to 1627 in 22cb01c

	popoverInnerContainer: {
	paddingTop: 0, // adjusting this because the mobile modal adds additional padding that we don't need for our layout
	maxHeight: '95%',
	},

But when calculate the height of emojiPicker at this line

App/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.js

Line 27 in 22cb01c

const listStyle = StyleUtils.getEmojiPickerListHeight(isListFiltered, windowHeight);

we using full windowHeight so the height of children will be more than the height of popoverInnerContainer.

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

At this line instead of using windowHeight we should update by using popoverInnerContainer height

  const listStyle = StyleUtils.getEmojiPickerListHeight(isListFiltered, windowHeight * 0.95);

or update popoverInnerContainer maxHeight style to 100%
POC

What alternative solutions did you explore? (Optional)

Instead of using height percentage we can use fixed align top height

  const EMOJI_OFFSET_TOP = 50
  const listStyle = StyleUtils.getEmojiPickerListHeight(isListFiltered, windowHeight - EMOJI_OFFSET_TOP);

and update innerContainerStyle
to

  innerContainerStyle={{...styles.popoverInnerContainer, maxHeight: windowHeight - EMOJI_OFFSET_TOP}}

[parasharrajat]

@joekaufmanexpensify Looks like the root cause of this issue is different from #35380. Could you please reopen this @joekaufmanexpensify?

We have a proposal.

[suneox]

But it seems to be fixed. @suneox Can you confirm?

@parasharrajat It still happens on the latest main and latest staging, can you try it on a smaller device?

Screen.Recording.2024-03-04.at.20.17.13.mov

[parasharrajat]

Oh, I see. I can reproduce it now on iphone 14 pro.

[joekaufmanexpensify]

Left my thoughts here. That other issue is already paying out $1k. I kinda feel like we should just handle both cases there since the behavior is quite similar.