Web

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:

Go to staging.new.expensify.com and log in
Open the context menu for any message
Click on copy to clipboard action of popover
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

@JmillsExpensify

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

@kbecciv

@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

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

recordbug_021222_web.mp4

Mobile

recordbug_021222_mobile.mp4

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

It is a duplicate of #11086

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.

@s77rt

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.

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Proposal:

Problem

Solution

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

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

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

Result

Web

Mobile

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	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);
	},

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

melvin-bot commented on Dec 2, 2022

Pujan92 commented on Dec 3, 2022

tienifr commented on Dec 3, 2022

Proposal:

Problem

Solution

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

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

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

Result

Web

Mobile

s77rt commented on Dec 4, 2022

adeel0202 commented on Dec 5, 2022

JmillsExpensify commented on Dec 5, 2022

JmillsExpensify commented on Dec 5, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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

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

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