Web - User unable to select Delete button after click on copy to clipboard action of popover

[kbecciv]

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

---

Issue found when executing PR #12917

Action Performed:

1. Go to staging.new.expensify.com and log in
2. Open the context menu for any message
3. Click on copy to clipboard action of popover
4. On the same opened popover click Delete comment

Expected Result:

User able to select Delete button after click on copy to clipboard action of popover.

Actual Result:

User unable to select Delete button after click on copy to clipboard action of popover. Context menu is dismissing very quick.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.36.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

Recording.1822.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[Pujan92]

@kbecciv I think by the time you are clicking the delete option the timeout gets over and the popover gets closed. I am able to delete it when I quickly select the option and attach the video for both.

3e902e73-b178-47bc-9094-9580546fcd06.webm

[tienifr]

Proposal:

Problem

The problem is from the onPress() function in ContextMenuActions. It only leaves the mini-menu open after the user press on the item, but not the popup menu.

In my opinion, it is an expected behavior on small devices, but maybe not for the web version. The user should not be required to press one more time to close the popup after copying the text, and the popup should only be closed when the user try to delete the message. Maybe it is the intention of the developer, but in case it is not, here is my solution proposal.

Solution

First, modify the behaviour of the delete button so that the menu would disappear and the confirmation box can display
In

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

Lines 193 to 205 in 82139c8

	onPress: (closePopover, {reportID, reportAction}) => {
	if (closePopover) {
	// Hide popover, then call showDeleteConfirmModal
	hideContextMenu(
	false,
	() => showDeleteModal(reportID, reportAction),
	);
	return;
	}
	// No popover to hide, call showDeleteConfirmModal immediately
	showDeleteModal(reportID, reportAction);
	},

Change

     onPress: (closePopover, {reportID, reportAction}) => {
            if (closePopover) {
                // Hide popover, then call showDeleteConfirmModal
                hideContextMenu(
                    false,
                    () => showDeleteModal(reportID, reportAction),
                );
                return;
            }

            // No popover to hide, call showDeleteConfirmModal immediately
            showDeleteModal(reportID, reportAction);
        },

to

     onPress: (closePopover, {reportID, reportAction}) => {
           // Hide popover, then call showDeleteConfirmModal
           hideContextMenu(
               false,
               () => showDeleteModal(reportID, reportAction),
           );
        },

Solution 1: In BaseReportActionContextMenu.js, change the behavior of the copy button on large screen (web) only

In

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

Line 70 in 82139c8

onPress={() => contextAction.onPress(!this.props.isMini, {

Change

contextAction.onPress(!this.props.isMini, ...

to

contextAction.onPress(this.props.isSmallScreenWidth, ...

Solution 2: In BaseReportActionContextMenu.js, change the behaviour of the copy button on all device

In

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

Line 70 in 82139c8

onPress={() => contextAction.onPress(!this.props.isMini, {

Change

contextAction.onPress(!this.props.isMini, ...

to

contextAction.onPress(false, ...

Solution 3: In BaseReportActionContextMenu.js, change the behaviour of the copy button on all device

In

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

Lines 119 to 121 in 82139c8

	if (closePopover) {
	hideContextMenu(true, ReportActionComposeFocusManager.focus);
	}

Change

if (closePopover) {
     hideContextMenu(true, ReportActionComposeFocusManager.focus);
}

to

hideContextMenu(true, ReportActionComposeFocusManager.focus);

Result

Web

recordbug_021222_web.mp4

Mobile

recordbug_021222_mobile.mp4

[s77rt]

Isn't this actually intended?
It's a feature not a bug I suppose

[adeel0202]

It is a duplicate of #11086

[JmillsExpensify]

Oh great catch! What's odd is that this issue was reported a couple of days ago, and that linked issue/PR would have long already been on staging and production.

[JmillsExpensify]

As for @s77rt's comment, I agree that this is intended behavior. A user shouldn't be able to click options on the comment action menu twice, so I'm going to close this issue regardless.