[HOLD for payment 2022-09-02] [$250] The unpin tooltip is clipped on Desktop

[mvtglobally]

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. Pin
3. hover over the pin icon

Expected Result:

Text should be visible

Actual Result:

Text is not visible when hover over unpin

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Desktop App

Version Number: 1.1.71-0
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: Any additional supporting documentation

Upwork URL: https://www.upwork.com/jobs/~010348882227b38f44
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1654273654678949

View all open jobs on GitHub

[melvin-bot]

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

[sobitneupane]

Reason:
This issue is occurring in Web as well. Also, the issue is not limited only to Pin tooltip. This issue can also be observed in other tooltips when we change language. This is because tooltip width and height is not updated with change in text once the tooltip is rendered.
Proposal:
The logic to update tooltipTextWidth is present only inside componentDidMount()

App/src/components/Tooltip/TooltipRenderedOnPageBody.js

Lines 66 to 70 in 284e0ba

	componentDidMount() {
	this.setState({
	tooltipTextWidth: this.textRef.offsetWidth,
	});
	}

.
If we add this logic in componentDidUpdate() as well, all the issues mentioned above will solve.

    componentDidMount() {
        this.setState({
            tooltipTextWidth: this.textRef.offsetWidth,
        });
    }

+    componentDidUpdate(prevProps) {
+        if (prevProps.text === this.props.text) {
+            return;
+        }
+        this.setState({
+            tooltipTextWidth: this.textRef.offsetWidth,
+        });
+    }

[Tushu17]

Hey, I've reported this bug before on slack.

[luacmartins]

@mvtglobally can you update the issue reporter to @Tushu17, since he mentioned it first? Thank you!

[arosiclair]

Clear instructions and seems like low-hanging fruit for a contributor. Marking as external.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[trjExpensify]

Job posted to upwork here: https://www.upwork.com/jobs/~010348882227b38f44

[mananjadhav]

@stitesExpensify, Yeah, the issue is if the tooltip is open and we change the text, its width doesn't change. @sobitneupane's proposal looks good.

@sobitneupane While I appreciate the spontaneous solutions, please wait for the issue to get triaged before posting the proposals.

🎀 👀 🎀 
C+ reviewed

[stitesExpensify]

I agree that @sobitneupane proposal looks good!

[melvin-bot]

📣 @sobitneupane You have been assigned to this job by @stitesExpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mananjadhav]

@sobitneupane Were you able to check the above messages?

[sobitneupane]

I am away from my laptop. I will try to debug within this week.

[mananjadhav]

@sobitneupane Did you get a chance to look at this?

[mananjadhav]

@sobitneupane Quick reminder. @stitesExpensify Will wait for 1-2 days else I'll raise a fix for this issue.

[trjExpensify]

@mananjadhav @sobitneupane @stitesExpensify what's going on with this issue, it's a tad unclear on the next steps?

[mananjadhav]

@trjExpensify Thanks for the bump. We haven't heard from @sobitneupane and I guess its a small fix, let me raise a PR for the fix by today/tomorrow.

[trjExpensify]

Thank you, @mananjadhav.

[mananjadhav]

@stitesExpensify @trjExpensify PR Raised for Safari Fix

[melvin-bot]

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

• fix: Tooltip wrap issue on Safari #10504

If no regressions arise, payment will be issued on 2022-09-02. 🎊

[sobitneupane]

Thanks @mananjadhav for handling the issue. I was away last two months. And Sorry for the inconvenience.

[adeel0202]

Hi, I reported the bug here when it was supposed to be fixed and was in production. Am I eligible for the reporting bonus?
cc: @stitesExpensify @trjExpensify

[trjExpensify]

Okay, can I get some clarity over what's due here and to whom? Here's my take..

$250 - @sobitneupane for the fix
$250 - @Tushu17 for the original reporting
$250 - @mananjadhav for C+
$250 - @adeel0202 for reporting the safari issue

Let me know if that's correct and I'll raise a new job on Upwork because the previous one has lapsed, and no contracts were started here.

[mananjadhav]

@trjExpensify There was a regression on the issue, which should deduct the amount for C+, but I would appreciate if can add an exception for this one as I put additional efforts in fixing the regression myself.

[trjExpensify]

Yeah, you fixed it, so I kept that in. 👍

Okay, job is here to apply everyone: https://www.upwork.com/jobs/~01e6c7617b3537f422

[trjExpensify]

@mananjadhav & @adeel0202 - paid!
@sobitneupane - offer sent
@Tushu17 - waiting for you to apply.

[trjExpensify]

@sobitneupane - paid.

[trjExpensify]

@Tushu17 - offer sent.

[Tushu17]

@trjExpensify offer accepted. Thank you.

[trjExpensify]

@Tushu17 - paid. Closing this out! 🎉

[melvin-bot]

⚠️ Looks like this issue was linked to a possible regression on PRODUCTION here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a production regression has occurred a Root Cause Analysis is required. Please follow the instructions here.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.