[HOLD for payment 2025-01-13] [$250] mWeb Safari - Workspace chat tooltip not positioned correctly

[m-natarajan]

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.74-8
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @rayane-djouah
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Log in as User A, an account that owns a workspace
2. Create a new account B
3. On A, Invite B to the workspace
4. On B, open the workspace chat
5. Verify a tooltip shows over the composer's Create button saying "Get started! Submit your first expense"

Expected Result:

The tooltip should be positioned over the composer's Create button on mWeb Safari same with other platforms

Actual Result:

The tooltip is not correctly positioned on mWeb Safari unlike other platforms

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021867716270354111393
• Upwork Job ID: 1867716270354111393
• Last Price Increase: 2024-12-13

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

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

[bernhardoj]

Proposal

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

WS chat tooltip in mobile Safari is positioned incorrectly.

What is the root cause of that problem?

We calculate the position of the tooltip based on the anchor y offset and the tooltip height. The calculation here is already correct.

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

Line 159 in 082e14b

yOffset - (tooltipHeight + POINTER_HEIGHT) + manualShiftVertical;

However, on iOS, the viewport is scrolled when the keyboard is shown. The viewport scroll explanation and visualization are well explained here: #16082.

Let's use an example. On my simulator, the composer yOffset without keyboard is 666px.

When the keyboard shows, the composer slides up which is closer to the top of the screen, so the yOffset is now 388px.

Let's ignore the tooltip height from the calculation and only use the composer yOffset as the top position of the tooltip. Since top is positioned based on the viewport, it won't be placed correctly above the composer.

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

We need to account for the viewport scroll amount for the top calculation. Tooltip has a shift vertical which we can use so we only changes this for WS chat tooltip.

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

Line 159 in 082e14b

yOffset - (tooltipHeight + POINTER_HEIGHT) + manualShiftVertical;

App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

Lines 461 to 462 in 082e14b

	shiftVertical={variables.composerTooltipShiftVertical}
	>

const offsetTop = useViewportOffsetTop();

shiftVertical={variables.composerTooltipShiftVertical + offsetTop}

(or we can apply it to measureTooltipCoordinate so it's applied to all educational tooltip)

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

N/A

What alternative solutions did you explore? (Optional)

Or we can use measureLayout and measure it relative to document.body.

App/src/components/Tooltip/EducationalTooltip/measureTooltipCoordinate/index.ts

Lines 4 to 9 in 082e14b

	export default function measureTooltipCoordinate(target: React.Component & Readonly<NativeMethods>, updateTargetBounds: (rect: LayoutRectangle) => void, showTooltip: () => void) {
	return target?.measureInWindow((x, y, width, height) => {
	updateTargetBounds({height, width, x, y});
	showTooltip();
	});
	}

return target?.measureLayout(document.body, (x, y, width, height) => {
    updateTargetBounds({height, width, x, y});
    showTooltip();
});

but measureLayout isn't available on the RN 0.76 docs anymore, so not sure if it's safe to use it.

[stephanieelliott]

This is buggy looking, seeing as it covers up workspace information on the page I think this needs to be fixed.

[melvin-bot]

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

[melvin-bot]

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

[hungvu193]

@bernhardoj How do you enable EducationalTooltip when keyboard opens?

[bernhardoj]

@hungvu193 you need to open an empty chat, so the composer is focused automatically. (I manually change the show condition to true too)