[$125] iOS - Chat - Emoji picker has no space to dismiss when searching for an emoji

[IuliiaHerets]

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: 9.0.67-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/2654739
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Launch Expensify and Go to any chat
2. Tap on the emoji icon
3. Tap on the search bar on the emoji picker

Expected Result:

There's a bit of space so a user can dismiss the picker without needing to make search results fewer or add an emoji

Actual Result:

Describe what actually happenedOn the iPhone 12 mini there's not enough space on the top of the emoji picker when making a search to dismiss it. User needs to either add an emoji or first tap on an empty area of the picker to dismiss the keyboard and then tap to exit the picker.
Also the picker is slightly overlap by the time and status bar

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6677549_1732663537801.RPReplay_Final1732663095.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861826366793735200
• Upwork Job ID: 1861826366793735200
• Last Price Increase: 2024-11-27

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

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

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-27 16:29:55 UTC.

Proposal

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

Emoji picker has no space to dismiss when searching for an emoji

What is the root cause of that problem?

We use 95% of the window height to set the maximum height for the picker list.

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

Line 31 in 9cae202

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

And for the height, we will set the greater than or equal NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT, which is 300

App/src/styles/utils/index.ts

Lines 929 to 931 in b011c91

	const style = {
	height: isRenderingShortcutRow ? CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT : CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT,
	};

When we focus on the emoji search, the keyboard will open, pushing the emoji list to the top. This happens because the height is set to 300, and the maximum height is 95% of the window height, as we do not exclude the keyboard's height

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

To resolve this issue, we need to exclude the height of the keyboard when setting the maximum height for the picker list. Some thing like that:

//src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts#L31
+    const {keyboardHeight} = useKeyboardState();
-    const listStyle = StyleUtils.getEmojiPickerListHeight(isListFiltered, windowHeight * 0.95);
+    const listStyle = StyleUtils.getEmojiPickerListHeight(isListFiltered, windowHeight * 0.95 - keyboardHeight);

//src/styles/utils/index.ts#L393
function getEmojiPickerListHeight(isRenderingShortcutRow: boolean, windowHeight: number): ViewStyle {
    const style = {
        height: isRenderingShortcutRow ? CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT : CONST.NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT,
    };

    if (windowHeight) {
        // dimensions of content above the emoji picker list
        const dimensions = isRenderingShortcutRow ? CONST.EMOJI_PICKER_TEXT_INPUT_SIZES + CONST.CATEGORY_SHORTCUT_BAR_HEIGHT : CONST.EMOJI_PICKER_TEXT_INPUT_SIZES;
        return {
            ...style,
            maxHeight: windowHeight - dimensions,
+            height: Math.min(style.height, windowHeight - dimensions),
        };
    }
    return style;
}

POC

Screen.Recording.2024-11-28.at.22.58.51.mov

What alternative solutions did you explore? (Optional)

[trjExpensify]

This is pretty minor and specific to a 4+ year old device. Dropping the price.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[hungvu193]

Thanks @huult, I don't think your RCA is correct. I can reproduce this issue on iPhone SE, even when the maxHeight is bigger than actual height. Apply your diff also didn't fix the bug btw.

[huult]

Proposal updated

• Add new RCA
• Add new solution
• Add poc on iPhone SE

@hungvu193 Sorry, I've updated the RCA and solution. Can you help me check it again?