[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 [email protected] 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)

[hungvu193]

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

I did the same thing. But on mSafari I didn't see the composer got focused on opening

Update: I can reproduce it with the above step + change the visible status of EducationalTooltip

[hungvu193]

Thanks @bernhardoj. Your proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[marcochavezf]

Thanks @hungvu193, assigning @bernhardoj 🚀

[bernhardoj]

PR is ready

cc: @hungvu193

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• Fix composer educational tooltip wrong position on mWeb Safari #54344

If no regressions arise, payment will be issued on 2025-01-13. 🎊

For reference, here are some details about the assignees on this issue:

• @hungvu193 requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests
• @rayane-djouah requires payment (Needs manual offer from BZ)

[melvin-bot]

@hungvu193 @stephanieelliott @hungvu193 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @hungvu193 owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@stephanieelliott)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1867716270354111393/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[hungvu193]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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: https://github.com/Expensify/App/pull/45390/files#r1914579840

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: IMO, This is not a critical bug and only can reproduce on the first time user creates a new workspace and invite a brand new account.

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Test:

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. Notice a tooltip shows over the composer's Create button saying "Get started! Submit your first expense".
6. Verify that the tooltip position is correct.

Do we agree 👍 or 👎

[stephanieelliott]

Created TR case here: https://github.com/Expensify/Expensify/issues/461367

[stephanieelliott]

Summarizing payment on this issue:

• Contributor: @bernhardoj $250, please request via ND
• Contributor+: @hungvu193 $250, please request via ND

[bernhardoj]

Requested in ND.