[HOLD for payment 2021-10-05] Double right clicking on comments hides the action menu

[isagoico]

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. Open any chat.
2. Right click on any message. When Context Menu is open, no mini menu is shown.
3. Now move to empty area on the same message, right click on that empty area(which is not covered by the context menu).
4. Click anywhere on the app. Context Menu should close.
5. Now hover back on the same message. Mini menu is not showing again.

Expected Result:

Mini menu and action menu should always be displayed.

Actual Result:

Action menu is not displayed.

Workaround:

User has to refresh the page.

Platform:

Where is this issue confirmed?

• Web (MacOS)

Version Number: 1.0.98-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation
Issue is not reproducible in Windows / Chrome.

issue.mp4

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1631561998213900

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

I am putting a fix for this into one of my assigned issues as It's relatively a small fix I found this issue while reproducing that issue. But I will wait for the confirmation.

#5197

Explanation and fix

1. App/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

   Lines 118 to 139 in e012bc8

   	const nativeEvent = event.nativeEvent || {};
   	this.contextMenuAnchor = contextMenuAnchor;
   	this.onPopoverHide = onHide;
   	this.getContextMenuMeasuredLocation().then(({x, y}) => {
   	this.setState({
   	cursorRelativePosition: {
   	horizontal: nativeEvent.pageX - x,
   	vertical: nativeEvent.pageY - y,
   	},
   	popoverAnchorPosition: {
   	horizontal: nativeEvent.pageX,
   	vertical: nativeEvent.pageY,
   	},
   	type,
   	reportID,
   	reportAction,
   	selection,
   	isPopoverVisible: true,
   	reportActionDraftMessage: draftMessage,
   	}, onShow);
   	});
   	}

   .

In the above code, OnPopoverHide callback is used to determine the activeness of the Selected ReportActionItem. This OnPopoverHide is assigned before the menu is really shown as Menu will be shown after setState has run. That's why onShow Callback is called on the completion callback on setState at line 137.

When we do the right click for the second time while the menu is active. Another showContextMenu call is triggered and a new callback is assigned to the this.onPopoverHide.

the Previous menu gets hidden due to the OutsideClick handler on the Modal

App/src/components/Modal/index.js

Line 13 in e012bc8

if (this.props.shouldCloseOnOutsideClick) {

. when Modal's onModalHide is called which is async and It will first call the OnPopoverHide callback and then reset it.

App/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

Line 164 in e012bc8

runAndResetOnPopoverHide() {

.

But due to omModalHide is called after the showContextMenu. The final state of this.OnPopoverHide will be empty () => {}. So the handler which was assigned on showContextMenu got reset.

To fix this.

1. We can move line 120 inside the setState's completion callback at line 137. It works well.

[MelvinBot]

Triggered auto assignment to @arielgreen (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[jasperhuangg]

@parasharrajat I like that solution! Feel free to request me to review your PR 👍

[parasharrajat]

PR is up. Awaiting job to be created @arielgreen. Thanks.

[arielgreen]

Sent offer