[HOLD for payment 2023-08-28] [$2000] Web- Chat - Pressing Copy to clipboard, Copy link, or Mark as unread from the Mini context menu does not refocus the Composer

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open App
2. Go to any chat
3. Send a message and click anywhere on the page to lose composer focus
4. Hover over the message and click any of these three Copy to clipboard, Copy link, Mark as unread

Expected Result:

Pressing any of these three options Copy to clipboard, Copy link, Mark as unread should have to refocus the composer like we do when using the Context menu

Actual Result:

Pressing any of these three options, Copy to clipboard, Copy link, or Mark as unread is, not refocusing the composer

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: 1.3.22.0

Reproducible in staging?: yes

Reproducible in production?: yes

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

copy-to-clipboard-does-not-focus.1.mov

Recording.2945.mp4

Expensify/Expensify Issue URL:

Issue reported by: @jayeshmangwani

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01517d6a9b05f42ab8
• Upwork Job ID: 1666174440708157440
• Last Price Increase: 2023-06-29

[melvin-bot]

Triggered auto assignment to @adelekennedy (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

[jayeshmangwani]

Proposal

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

Pressing Copy to clipboard, Copy link, Download, or Mark as unread from the Mini context menu does not refocus the Composer, but Composer is refocused when pressed from the context menu opened from a long press

What is the root cause of that problem?

We are focusing the composer on the above actions if we press from the Context menu and we are doing nothing if we press from the mini menu
here is the condition for checking if the press is from the popover or not and if the press is from the context menu then call the ReportActionComposeFocusManager.focus

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

Lines 102 to 104 in c917c44

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

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

We need to add an else condition to Copy to clipboard, Copy link, Download, and Mark as unread(or any other actions) press, where we will call ReportActionComposeFocusManager.focus() if it is not the from Popover, it means mini context menu

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

Line 45 in c917c44

const isMini = !closePopover;

here need to add else and all other presses like Copy to clipboard, Copy link, and Mark as unread

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

Lines 102 to 104 in c917c44

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

  } else {
    ReportActionComposeFocusManager.focus()
  }

What alternative solutions did you explore? (Optional)

none

[melvin-bot]

@adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01517d6a9b05f42ab8

[melvin-bot]

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @youssef-lr (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[will0225]

I want to have this issue.

[youssef-lr]

@0xmiroslav what do you think of the proposal above?

[0xmiros]

@jayeshmangwani your solution easily causes regressions. Please test yourself after applying your solution.

[youssef-lr]

Waiting for more proposal.

[the-mold]

Proposal

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

Composer field must be focused, when user clicks on one of three actions(copy clipboard, copy link and mark message as new) in the popup element(MiniReportActionContextMenu component) that appears in the top right corner when a message is hovered.

What is the root cause of that problem?

All three actions do NOT implement methods for focusing the composer when actions are called from the MiniReportActionContextMenu component.
In their onPress handlers, there is a method called hideContextMenu but it is not used in case of the MiniReportActionContextMenu which is our case. hideContextMenu is functional only for the ReportActionContextMenu(the popup that appears with the right click on an action).

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

Line 192 in 035783a

hideContextMenu(true, ReportActionComposeFocusManager.focus);

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

The first step is easy: we need to focus the composer manually when actions are triggered from the MiniReportActionContextMenu component. I will implement such function:

function hideAllContextMenus(isMini) {
    if (isMini) {
        ReportActionComposeFocusManager.focus();
        return;
    }

    hideContextMenu(true, ReportActionComposeFocusManager.focus);
}

and I will call it in onPress methods for all three actions, like so:

onPress: (closePopover, {reportAction, selection}) => {
	//...
	hideAllContextMenus(!closePopover);
}

But then I start getting such effect: compose field is focused but the click animation is broken:

11.mov

Each action in the view is wrapped in a Hoverable HOC component.

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

Lines 427 to 428 in 035783a

	<Hoverable disabled={Boolean(props.draftMessage)}>
	{(hovered) => (

I noticed that when I call the ReportActionComposeFocusManager.focus() method, the onBlur method in the Hoverable is triggered and the hover state is set to false for a moment. This triggers rerender in ContextMenuItem component and completion animation seems to be broken.

I propose to ignore state changes in Hoverable component in onBlur method(and ONLY this method) if the the composer element is clicked.

The current onBlur method in Hoverable component looks like this:

App/src/components/Hoverable/index.js

Lines 109 to 117 in 035783a

	onBlur: (el) => {
	if (!this.wrapperView.contains(el.relatedTarget)) {
	this.setIsHovered(false);
	}
	if (_.isFunction(child.props.onBlur)) {
	child.props.onBlur(el);
	}
	},

This is the new onBlur method. Here I check if I am allowed to ignore hover state change for the element if this.props.ignoreBlurForElement prop allows it:

onBlur: (el) => {
    if (!this.wrapperView.contains(el.relatedTarget)) {
        if (!this.props.ignoreBlurForElement || !this.props.ignoreBlurForElement(el.relatedTarget)) {
            this.setIsHovered(false);
        }
    }

    if (_.isFunction(child.props.onBlur)) {
        child.props.onBlur(el);
    }
}

And this is how the prop is passed in the Hoverable component in the file ReportActionitem.js.
The ignoreBlurForElement returns true if the element that user clicked on is the composer.

<Hoverable
  ...
  ignoreBlurForElement={(el) => el === lodashGet(ReportActionComposeFocusManager, 'composerRef.current')}>
...

This video is the end result. Notice that completion animation goes till the end and composer field is focused immediately after the click.
https://github.com/Expensify/App/assets/15109844/82f9ad15-99fb-4b90-93ad-5a60a92233a6

What alternative solutions did you explore? (Optional)

In ContextMenuActions.js I could call ReportActionComposeFocusManager.focus() for MiniReportActionContextMenu component WITH a certain delay. I could make a setTimeout and wait for 1800ms(duration of the completion state animation) and only then shoot the ReportActionComposeFocusManager.focus() action. In this way the composer will be focused only after 1800ms.
The initial solution is a bit harder but much cleaner.

[youssef-lr]

@0xmiroslav ^

[0xmiros]

@petromoldovan we don't recommend setTimeout unless it's the only solution. Still open for better proposals.

[the-mold]

@0xmiroslav I also do not recommend to set the setTimeout. It was just an alternative to emphasise how much better the main proposal is. What do you think about my main proposal?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.55-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• prevent blur on composer when click on mini context menu item #24252

If no regressions arise, payment will be issued on 2023-08-28. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @mkhutornyi requires payment
• @situchan requires payment
• @jayeshmangwani requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[adelekennedy]

It looks like @mkhutornyi was assigned Aug 6th, PR was ready to be merged by the 8th but was actually merged on the 15th after @mountiny was back from ooo

[mountiny]

Sounds fair thanks

[adelekennedy]

Payouts due:

Issue Reporter: $250 @jayeshmangwani
Contributor: $2000 @mkhutornyi (Upwork)
Contributor+: $2000 @situchan (Upwork)

Eligible for 50% #urgency bonus? Y

Upwork job is here.

[adelekennedy]

@mkhutornyi will you apply here?

[mkhutornyi]

@adelekennedy it's private link. The public link format is https://www.upwork.com/jobs/xxx
https://www.upwork.com/jobs/~01517d6a9b05f42ab8 is original post but it's no longer available

[adelekennedy]

@mkhutornyi here

[adelekennedy]

pending final payment