[$8000] Mac / Safari - Copy to clipboard Tooltip doesn't show copied on clicking the clipboard icon.

[kavimuru]

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. Click on the participant title to open the details view
3. Click on the Copy to clipboard icon 📋 in the email.
4. Notice that the tooltip is shown for Copy to clipboard but not Copied after the text is copied.
   (Videos to compare Chrome and Safari are attached)

Expected Result:

Copied tooltip should be shown

Actual Result:

Copied tooltip after the text is copied doesn't show up

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web - Mac / Safari

Version Number: 1.2.33-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

copied-tooltip-not-showingup-safari.mov

copied-tooltip-not-showingup-chrome.mov

Recording.19.mp4

Expensify/Expensify Issue URL:
Issue reported by: @mananjadhav
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1669714466881009

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014886ff5b8f1db983
• Upwork Job ID: 1598039428548734976
• Last Price Increase: 2022-12-29

[melvin-bot]

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

[allroundexperts]

Proposal

Issue

This PR:
#12572
introduced resetsOnClickOutside to the Hoverable component. This causes this issue on Safari.

Fix

Remove the resetsOnClickOutside property. It's not really checking if the click is outside. It resets the state nonetheless.

diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 8d3a34549..af46f8154 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -189,7 +189,6 @@ class Tooltip extends PureComponent {
                     containerStyles={this.props.containerStyles}
                     onHoverIn={this.showTooltip}
                     onHoverOut={this.hideTooltip}
-                    resetsOnClickOutside
                 >
                     {child}
                 </Hoverable>

Result

Screen.Recording.2022-11-30.at.5.43.34.AM.mov

[Pujan92]

Proposal

As resetsOnClickOutside added to solve this issue, we can pass value false for our use case(for copy actions)

App/src/components/Tooltip/index.js

Line 192 in 1527fdc

resetsOnClickOutside

resetsOnClickOutside={!_.isUndefined(this.props.resetsOnClickOutside) ? this.props.resetsOnClickOutside : true}

App/src/components/ContextMenuItem.js

Line 77 in 1527fdc

<Tooltip text={text}>

<Tooltip text={text} resetsOnClickOutside={false}>

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014886ff5b8f1db983

[melvin-bot]

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

[melvin-bot]

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