mWeb - Chat - Tooltip appears below composer after returning from "Go back to home page" link

[IuliiaHerets]

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.0.84-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: Exp #54869
Email or phone of affected tester (no customers): applausetester+010108kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.2
App Component: Chat Report View

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new account.
3. Create a workspace.
4. Go to workspace chat.
5. Do not tap + as the tooltip should not be dismissed.
6. Send this link https://staging.new.expensify.com/r/6732929228344392/trip/2905990518128580779/0
7. Tap on the link.
8. Tap "Go back to home page"

Expected Result:

The educational tooltip should appear above the composer.

Actual Result:

The educational tooltip appears below the composer.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6711604_1736574805440.ScreenRecording_01-11-2025_13-28-55_1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[linhvovan29546]

Edited by proposal-police: This proposal was edited at 2025-01-11 12:50:26 UTC.

Proposal

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

mWeb - Chat - Tooltip appears below composer after returning from "Go back to home page" link

What is the root cause of that problem?

When returning from another link, the isOverlappingAtTop calculation is incorrect. This causes the function to return true, setting shouldShowBelow to true, which makes the tooltip render below the composer instead of above it.

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Line 132 in 4491e85

!!(tooltip && isOverlappingAtTop(tooltip, xOffset, yOffset, tooltipTargetWidth, tooltipTargetHeight)) ||

The issue arises from the calculation based on elementAtTargetCenterX. When navigating to another link, the point at targetCenterX becomes inaccurate.

App/src/styles/utils/generators/TooltipStyleUtils/isOverlappingAtTop/index.ts

Lines 31 to 42 in 4491e85

	const elementAtTargetCenterX = document.elementFromPoint(targetCenterX, yOffset);
	// Ensure it's not the already rendered element of this very tooltip, so the tooltip doesn't try to "avoid" itself
	if (!elementAtTargetCenterX || ('contains' in tooltip && tooltip.contains(elementAtTargetCenterX))) {
	return false;
	}
	const rectAtTargetCenterX = elementAtTargetCenterX.getBoundingClientRect();
	// Ensure it's not overlapping with another element by checking if the yOffset is greater than the top of the element
	// and less than the bottom of the element. Also ensure the tooltip target is not completely inside the elementAtTargetCenterX by vertical direction
	const isOverlappingAtTargetCenterX = yOffset > rectAtTargetCenterX.top && yOffset < rectAtTargetCenterX.bottom && yOffset + tooltipTargetHeight > rectAtTargetCenterX.bottom;

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

We can easily fix this by introducing a new prop shouldForceRenderingTop, similar to the existing shouldForceRenderingBelow.

App/src/styles/utils/generators/TooltipStyleUtils/index.ts

Lines 129 to 133 in 4491e85

	shouldShowBelow =
	shouldForceRenderingBelow ||
	yOffset - tooltipHeight - POINTER_HEIGHT < GUTTER_WIDTH + titleBarHeight ||
	!!(tooltip && isOverlappingAtTop(tooltip, xOffset, yOffset, tooltipTargetWidth, tooltipTargetHeight)) ||
	anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP;

            if (!shouldForceRenderingTop) {
                shouldShowBelow =
                    (shouldForceRenderingBelow ||
                        yOffset - tooltipHeight - POINTER_HEIGHT < GUTTER_WIDTH + titleBarHeight ||
                        !!(tooltip && isOverlappingAtTop(tooltip, xOffset, yOffset, tooltipTargetWidth, tooltipTargetHeight)) ||
                        anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) && shouldForceRenderingBelow;
            }

And set shouldForceRenderingTop flag is true in here, then the tooltip will always render at the top. Since we are certain that the tooltip will not overlap at the top.

                   <EducationalTooltip
                        ...
                        shouldForceRenderingTop // new code
                    >

POC

Before	After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-01-11.at.19.36.05.mp4	Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2025-01-11.at.19.21.57.mp4

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

No, UI bug

What alternative solutions did you explore? (Optional)

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.