[HOLD for payment 2024-12-20] [$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-12-04
• Automatic offers:
• huult | Contributor | 105266175

Issue Owner

Current Issue Owner: @trjExpensify

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

[melvin-bot]

@trjExpensify, @hungvu193 Eep! 4 days overdue now. Issues have feelings too...

[hungvu193]

Not overdue. I'll re-review this week

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

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

[trjExpensify]

@hungvu193 thoughts on the proposal?

[hungvu193]

I'll rereview this weekend

[hungvu193]

Thanks @huult 's proposal here looks good and tests well!

🎀 👀 🎀

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.75-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• add dismiss space for emoji picker when searching #53806

If no regressions arise, payment will be issued on 2024-12-20. 🎊

For reference, here are some details about the assignees on this issue:

• @hungvu193 requires payment through NewDot Manual Requests
• @huult requires payment automatic offer (Contributor)

[melvin-bot]

@hungvu193 @trjExpensify @hungvu193 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[huult]

I tried to revert my pull request, but the crash issue still occurred. I think it’s not related to this ticket.

Screen.Recording.2024-12-14.at.01.21.22.mp4