[PAID] [$1000] Bug: Tooltip gets stuck on the page reported by @Puneet-here

[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. Decrease the screen size
2. Hover over any contact at chat navigator
3. When the tooltip appears open the chat
4. Hover at back button until the tooltip shows up then press back

Expected Result:

The tooltip should go away

Actual Result:

The tooltip should doesn't go away

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.2.18-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:
https://user-images.githubusercontent.com/43996225/196830711-438ca9f7-1bbd-44df-80a2-3bf7e0b9ff01.mp4
https://user-images.githubusercontent.com/43996225/196830700-9a924829-e70f-4121-bd50-80e148d1fc91.mov

Expensify/Expensify Issue URL:
Issue reported by: @Puneet-here
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1666210802145239

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

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

[laurenreidexpensify]

looks like a solid external @chiragsalian ? can you do the honours pls :)

[chiragsalian]

Yup, i can reproduce and adding label.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Ollyws]

Proposal
This seems to be happen because sometimes the setState callback which triggers the tooltip to hide is never called despite the state being updated. It seems to happen when combined with the navigation drawer opening/closing.

App/src/components/Hoverable/index.js

Lines 52 to 54 in b2acb8f

	if (isHovered !== this.state.isHovered && !(isHovered && this.hoverDisabled)) {
	this.setState({isHovered}, isHovered ? this.props.onHoverIn : this.props.onHoverOut);
	}

A solution to this is to remove the setState callback and call setState followed by the onHoverIn/Out callbacks.

        if (isHovered !== this.state.isHovered && !(isHovered && this.hoverDisabled)) {
-            this.setState({isHovered}, isHovered ? this.props.onHoverIn : this.props.onHoverOut);

+            this.setState({isHovered});

+            if (isHovered) {
+                this.props.onHoverIn();
+            } else {
+                this.props.onHoverOut();
+            }
        }

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[laurenreidexpensify]

https://www.upwork.com/jobs/~01a51c9760a2d3a8c8

[rushatgabhane]

@Ollyws thanks for your proposal!

sometimes the setState callback which triggers the tooltip to hide is never called despite the state being updated

I can't find any evidence that points to callback not being called. You could try console logging.

You're close but we need to fix the root cause because not using callbacks will lead to race conditions.

[laurenreidexpensify]

not overdue, still looking for proposals

[laurenreidexpensify]

Price increased to $500

[laurenreidexpensify]

Offers out in Upwork for everyone with correct pricing

[getusha]

@laurenreidexpensify Thanks Accepted.

[JmillsExpensify]

@laurenreidexpensify Wanted to make sure you have visibility on the regression in the linked PR. Let's wait for that to play out until the BZ checklist is filled out.

[parasharrajat]

PR of this issue caused a regression #12685.

[rushatgabhane]

Fixed the regression before it got to staging
PR #12677

[laurenreidexpensify]

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

• [@chiragsalian @rushatgabhane] The PR that introduced the bug has been identified. Link to the PR: Tooltip gets stuck on the page fix #12572
• [@chiragsalian @rushatgabhane] 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: Tooltip gets stuck on the page fix #12572 (comment)
• [@chiragsalian @rushatgabhane] 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:
• [@laurenreidexpensify] A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:
• [@laurenreidexpensify] Applicable payments have been made. This potentially includes the issue reporter, the contributor that fixed the issue, and/or the contributor+ that helped on the issue.

[melvin-bot]

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

• Tooltip gets stuck on the page fix #12572

If no regressions arise, payment will be issued on 2022-11-24. 🎊

[laurenreidexpensify]

@chiragsalian @rushatgabhane can you link the PR you think caused the regression in the comment above? Thanks

[laurenreidexpensify]

Regression test buddy check here https://expensify.slack.com/archives/C01SKUP7QR0/p1669220417075829

[chiragsalian]

Updated the first two. Not sure what to do about the third. It was discussed on slack and not in expensify-bugs. So should we start a discussion in #expensify-bugs?

[laurenreidexpensify]

@Puneet-here @rushatgabhane @getusha payment has been issued in Upwork 👍

[getusha]

PR merged within 3 business days. so we're eligible for the 50% bonus? @laurenreidexpensify

[laurenreidexpensify]

@getusha @rushatgabhane bonus sent 👍🏽

[situchan]

It doesn't seem that #12572 fixed the issue completely. Issue reported again #13947

[getusha]

@situchan this approach was overwritten here #13146

[parasharrajat]

I agree. It seems we forgot to make the solution generic. #13947. cc: @rushatgabhane