[HOLD for payment 2024-03-14] [$500] Chat - Hover menu is not dismissed after opening emoji picker

[lanitochka17]

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.28-0
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:

Action Performed:

1. Go to any chat
2. Hover over any message
3. Click Add reaction icon
4. Hover away from the message

Expected Result:

Hover menu is dismissed after opening emoji picker

Actual Result:

Hover menu is not dismissed after opening emoji picker

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

Bug6347969_1705690330485.20240120_005724.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c51a081dafada031
• Upwork Job ID: 1758506887343419392
• Last Price Increase: 2024-02-16

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

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

[esh-g]

BTW, This is not a regression from the overflow menu PR as the hover menu was not dismissed even before the PR

Screen.Recording.2024-01-18.at.8.07.24.PM.mov

[abzokhattab]

Proposal

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

Hover menu is not missed after opening emoji picker

What is the root cause of that problem?

in the onPressOpenPicker we dont close the context menu

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 126 in c884245

onPressOpenPicker={openContextMenu}

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

define a new function openPickerAndCloseMenu

            const openPickerAndCloseMenu = () => {
                openContextMenu();
                closeContextMenu();
            };

then inside then change onPressOpenPicker to

                        onPressOpenPicker={openPickerAndCloseMenu}

Alternatively:

OR we can rename the onEmojiPickerClosed prop to closeContextMenu the same as we currently have the in the QuickEmojiReactions

then inside the openEmojiPicker
we need to call the closeMenuContext on opening so we need to change the function to:

    const openEmojiPicker = () => {
        onPressOpenPicker();
        closeMenuContext();
        EmojiPickerAction.showEmojiPicker(
            undefined,
            (emojiCode, emojiObject) => {
                onEmojiSelected(emojiObject, emojiReactions);
            },
            ref,
            undefined,
            () => {},
            reportAction.reportActionID,
        );
    };

[ishpaul777]

this doesn't look like a bug to me, seems intentional, it would be weird if the mini context menu close and emoji picker is open and hard to tell which message user is reacting to if there is no visual highlight to the message (the context menu is the visual highlight for user currently)

[JeremyCroff]

Proposal

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

The message context menu does not close when leaving the focus area of the message, after you have selected the Add emoji reaction button. This is inconsistent with other buttons such as the Menu button from the context menu, hence an inconsistent experience.

What is the root cause of that problem?

The root cause is that each context button is responsible for it's own calling of the closePopover callback. And is left out in the emoji reaction button. Causing an inconsistent behavior within the app.

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

In order to solve this problem I looked at both Slack and Discord to see how they handle this. They both will keep the hover context menu open, if you are in an unfinished interaction such as having selected the emoji button but not having chosen one yet. Even after leaving focus of the message that triggered the context menu.
This means that the current behavior for the Emoji reaction button is a standard one, and we should actually change the behavior of how the Menu button behaves ( last one in the hover context menu ), for consistency within the app, and across other popular messaging apps for the best customer experience.

What alternative solutions did you explore? (Optional)

I explored hiding the context menu, by calling closePopover. Simple, but will deviate us from industry standards.

We can further enhance the proposed experience, by persisting a selected state on the button that is keeping the context menu open. Clicking that selected button again, will unselect the triggered action such as opening the Menu or Emoji picker, and the context menu will behave as normal again by disappearing on the mouse leave.

Also addressing the current overlap of elements