[$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
• [x] iOS: Standalone
• [x] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/93f3d80b-dad9-446c-a2ce-2d8c92472f1d

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: @hungvu193

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

https://github.com/Expensify/App/blob/9cae202fec631e82fb8fdfe8c661047cb3fccdce/src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts#L31

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

https://github.com/Expensify/App/blob/b011c915c213118fcf312199dab5053550d10754/src/styles/utils/index.ts#L929-L931

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

https://github.com/user-attachments/assets/a11e2ce6-64ca-4b3d-8378-efda08b129e8

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

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

[melvin-bot[bot]]

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

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

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

[hungvu193]

Not overdue. I'll re-review this week

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

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

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

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

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/53806

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

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

https://github.com/user-attachments/assets/f0d9a0d7-a411-493b-92c9-7ad57d5ba522

[trjExpensify]

👋 @hungvu193 let's get the checklist for tomorrow!

[hungvu193]

BugZero Checklist:

• [x] [Contributor] Classify the bug:

Bug classification

Source of bug:

• [ ] 1a. Result of the original design (eg. a case wasn't considered)
• [x] 1b. Mistake during implementation
• [ ] 1c. Backend bug
• [ ] 1z. Other:

Where bug was reported:

• [x] 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• [ ] 2b. Reported on staging (eg. found during regression or PR testing)
• [ ] 2d. Reported on a PR
• [ ] 2z. Other:

Who reported the bug:

• [ ] 3a. Expensify user
• [ ] 3b. Expensify employee
• [ ] 3c. Contributor
• [x] 3d. QA
• [ ] 3z. Other:

• [x] [Contributor] 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: https://github.com/Expensify/App/pull/38755/files#r1893451474

• [x] [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: N/A

• [x] [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

1. Login with any account.
2. Go to any chat report.
3. Click emoji icon to open the emoji picker.
4. Click on emoji picker search input
5. Verify that user can dismiss the emoji picker by pressing the top space.

Do we agree 👍 or 👎

[trjExpensify]

Thanks! This was caught with this existing regression test for the emoji picker, so I think we're good on a standalone test.

Payment summary as follows:

• $125 to @hungvu193 for the c+ review (go ahead and request!)
• $125 to @huult for the PR

Paid, closing!

[garrettmknight]

$125 approved for @hungvu193