[$500] Chat - Unable to close Emoji-reacted popover when click outside, near the bottom of popover

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to any chat
2. Hover on any chat message and send a any Emoji
3. Right click on an emoji reacted of a message
4. Verify that and Emoji-reacted popover is displaying
5. Click outside, but near the bottom of popover, horizontally

Expected Result:

The Emoji-reacted popover should be closed if we click outside.

Actual Result:

The Emoji-reacted popover is not closed, until we click other outside area.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.57-5

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

Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-16.At.07.19.46.mp4

Recording.1342.mp4

Expensify/Expensify Issue URL:

Issue reported by: @hoangzinh

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692145547162429

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a318eb91f3f42c7c
• Upwork Job ID: 1699231586202316800
• Last Price Increase: 2023-09-06
• Automatic offers:
• mollfpr | Reviewer | 26614588
• samh-nl | Contributor | 26614590
• hoangzinh | Reporter | 26614591

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[samh-nl]

Proposal

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

Unable to close Emoji-reacted popover when click outside, near the bottom of popover

What is the root cause of that problem?

We are preventing the popover from closing when clicking in the popover, but also the anchor. In this case, the entire View component where the reactions sit in is used as the anchor, causing clicks to be ignored in this area.

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Lines 114 to 116 in f2a952d

	totalReactionCount > 0 && (
	<View
	ref={popoverReactionListAnchor}

App/src/components/PopoverProvider/index.js

Lines 31 to 47 in f2a952d

	const listener = (e) => {
	if (
	!activePopoverRef.current ||
	!activePopoverRef.current.ref ||
	!activePopoverRef.current.ref.current ||
	activePopoverRef.current.ref.current.contains(e.target) ||
	(activePopoverRef.current.anchorRef && activePopoverRef.current.anchorRef.current && activePopoverRef.current.anchorRef.current.contains(e.target))
	) {
	return;
	}
	const ref = activePopoverRef.current.anchorRef;
	closePopover(ref);
	};
	document.addEventListener('click', listener, true);
	return () => {
	document.removeEventListener('click', listener, true);
	};

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

We can redefine the anchor to be more specific. Instead of the entire View component, we in this case can use only the EmojiReactionBubble component, which is the button that the user clicks to open the popover.

In ReportActionItemEmojiReactions, this would entail the following changes:

- const popoverReactionListAnchor = useRef(null);
+ const popoverReactionListAnchors = useRef({});

const onReactionListOpen = (event) => {
-    reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID);
+    reactionListRef.current.showReactionList(event, popoverReactionListAnchors.current[reactionEmojiName], reactionEmojiName, props.reportActionID);
};

<EmojiReactionBubble
-    ref={props.forwardedRef}
+    ref={(ref) => (popoverReactionListAnchors.current[reaction.reactionEmojiName] = ref)}

(we do not use props.forwardedRef)

Fixed result:

chrome_jpNYSrJnZT.mp4

What alternative solutions did you explore? (Optional)

Option 1. A variation of this is to move showReactionList into EmojiReactionBubble so that we don't have to keep track of different references but just 1. However, this component is also used independently without popover functionality, so it makes less sense to put this functionality in here.
Option 2. We can remove this condition, so clicking on the anchor is not ignored and also results in closing the popover.

-                 (activePopoverRef.current.anchorRef && activePopoverRef.current.anchorRef.current && activePopoverRef.current.anchorRef.current.contains(e.target))

However, we would have to check other popovers to ensure that removing this condition does not have unintended effects.

[jeet-dhandha]

Proposal

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

• Reaction List is not closing when clicking on ReportActionItemEmojiReactions section.

What is the root cause of that problem?

• The issue is that when pressing on "emoji render" view the ref which is used to open the popover is not the same as the ref which is used to close the popover. So to fix this we should have same ref for both open and close. Like we did for MoneyRequestAction and ReportPreview in ReportActionItem.

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

• In ReportActionItem pass contextMenuAnchor ref to ReportActionItemEmojiReactions as a prop with value as popoverAnchorRef.

App/src/pages/home/report/ReportActionItem.js

Lines 410 to 411 in 6b1a667

	<ReportActionItemEmojiReactions
	reportActionID={props.action.reportActionID}

• In ReportActionItemEmojiReactions remove popoverReactionListAnchor ref from whole file and use props.contextMenuAnchor.current in onReactionListOpen instead of popoverReactionListAnchor.current. Also remove popoverReactionListAnchor from <View> too.

App/src/components/Reactions/ReportActionItemEmojiReactions.js

Lines 97 to 99 in 6b1a667

	const onReactionListOpen = (event) => {
	reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reactionEmojiName, props.reportActionID);
	};

Now we will need to make some changes in BasePopoverReactionList:

• We will create a new ref called this.reactionListContextMenuAnchor = React.createRef();.

• In showReactionList function we will use this.reactionListContextMenuAnchor instead of this.reactionListAnchor.

App/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.js

Line 161 in 6b1a667

this.reactionListAnchor.current = reactionListAnchor;

• The we will update ref in getReactionListMeasuredLocation we will use this.reactionListContextMenuAnchor instead of this.reactionListAnchor.

App/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.js

Lines 112 to 113 in 6b1a667

	if (this.reactionListAnchor.current) {
	this.reactionListAnchor.current.measureInWindow((x, y) => resolve({x, y}));

What alternative solutions did you explore? (Optional)

• N/A

[melvin-bot]

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

[anmurali]

Will reproduce and slap the label on tomorrow

[jeet-dhandha]

Bump @anmurali

[melvin-bot]

@anmurali Eep! 4 days overdue now. Issues have feelings too...

[anmurali]

It looks like the area immediately below the popover is some kinda "dead" zone!