[$250] Web - Tooltip - Two rename tooltips are displayed

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.1.11-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+ps309@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new account.
3. Create a new workspace.
4. Submit an expense to the workspace chat.
5. Go to Reports.
6. Click Filters button.
7. Apply any filter, and click Save search.
8. Click Expenses.
9. Click on the expense submitted in Step 4.
10. Close the RHP.

Expected Result:

Only one rename tooltip will be displayed.

Actual Result:

Two rename tooltips are displayed.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6766842_1741654176634.20250311_084642.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021899519705512085595
• Upwork Job ID: 1899519705512085595
• Last Price Increase: 2025-03-11
• Automatic offers:
• nkdengineer | Contributor | 106497756

Issue Owner

Current Issue Owner: @c3024

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nkdengineer]

Proposal

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

Two rename tooltips are displayed.

What is the root cause of that problem?

When we navigate to another search page, the shouldRenderTooltip of the three-dot on the previous search page is still true but it's hidden based on this logic.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 106 to 108 in ef00a61

	const unsubscribe = navigator.addListener('blur', () => {
	if (!shouldHideOnNavigate) {
	return;

When we open the RHP, shouldRenderTooltip of both three-dot changes to false because this tooltip is hidden now. After the RHP is closed, shouldRenderTooltip changes to true and the tooltip is rendered again for both of them. And because the element of the previous search page isn't found in the current search page, a tooltip is displayed at the top.

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

Update the shouldShow condition for the rename tooltip to only show if the page is focused

const isFocused = useIsFocused();
const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
    CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.RENAME_SAVED_SEARCH,
    shouldShowSavedSearchesMenuItemTitle && isFocused,
);

App/src/pages/Search/SearchTypeMenu.tsx

Line 51 in ef00a61

const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is UI bug, no need to test.

What alternative solutions did you explore? (Optional)

We can implement a solution in BaseEducationalTooltip by creating a new variable that stores the focus state, when the page is blurred, set this to false. Add another listener with focus event and set this to true when the page is focused. Then we will only show the tooltip if this variable is true.

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Lines 106 to 108 in ef00a61

	const unsubscribe = navigator.addListener('blur', () => {
	if (!shouldHideOnNavigate) {
	return;

Result

Screen.Recording.2025-03-11.at.11.42.14.mov

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[zanyrenney]

I can't reproduce this exact flow, but I have seen similar behaviour in the past in my own LHN. Looking into this to try and reproduce.

[melvin-bot]

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

[zanyrenney]

Adding the external label.

[melvin-bot]

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

[c3024]

Thanks for the proposal.

I think checking the focus state to determine whether the tooltip should be displayed, as suggested in the main solution, seems better to me than the alternative approach of tracking the parent page focus state in BaseEducationalTooltip. The focus check is also used on other pages to determine tooltip visibility.

The fix suggested in the main solution of @nkdengineer’s proposal LGTM!

🎀 👀 🎀 C+ reviewed!