[$250] Android native - Workspace chat tooltip appears broken

[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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
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:

A tooltip should shows over the composer's Create button saying "Get started! Submit your first expense"

Actual Result:

The tooltip appears broken

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/~021868166063366405980
• Upwork Job ID: 1868166063366405980
• Last Price Increase: 2024-12-15

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot]

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

[rayane-djouah]

This bug is consistently reproducible for me

[rayane-djouah]

It's reproducible for me on the android simulator but not on my android physical device

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@mananjadhav - We are waiting for proposals here.

---

Heads up, I will be offline until Wednesday, December 18, 2024, and will not actively watch over this GitHub during that period.

If this GitHub requires an urgent update, please ask for help in the #expensify-open-source Slack Room. If the inquiry can wait, I'll review it when I return online.

[mananjadhav]

Yes waiting for proposals

[rohit9625]

I am facing similar issues with all these tooltips on a real device running Android 14:-

[linhvovan29546]

Hi @mananjadhav @rayane-djouah My proposal here addresses and resolves this issue.

[linhvovan29546]

Edited by proposal-police: This proposal was edited at 2024-12-17 10:01:40 UTC.

Proposal

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

Android native - Workspace chat tooltip appears broken

What is the root cause of that problem?

The BaseGenericTooltip component currently uses the onLayout handler with a setTimeout to measure and update the contentMeasuredWidth. This approach introduces inaccuracies in width measurement, after 300ms, the measure function returns an incorrect (too small) width. This causes setContentMeasuredWidth to update with the wrong value, leading to layout issues.

App/src/components/Tooltip/BaseGenericTooltip/index.native.tsx

Lines 120 to 126 in e27c5ea

	setTimeout(() => {
	InteractionManager.runAfterInteractions(() => {
	target.measure((x, y, width) => {
	setContentMeasuredWidth(width);
	});
	});
	}, CONST.ANIMATED_TRANSITION);

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

• Remove the setTimeout, measure logic from the onLayout handler.
• Use e.nativeEvent.layout directly to get the width and height
• Use useSharedValue to store the width and height, passing these values directly to animationStyle.
• The new code is as follows.

   const contentMeasuredWidthAnimated = useSharedValue<number>(0)
    const wrapperMeasuredHeightAnimated = useSharedValue<number>(0)
...
    const animationStyle = useAnimatedStyle(() => {
        return StyleUtils.getTooltipAnimatedStyles({ tooltipContentWidth: contentMeasuredWidthAnimated.get(), tooltipWrapperHeight: wrapperMeasuredHeightAnimated.get(), currentSize: animation });
    });
...
                onLayout={(e) => {
                    const { height, width } = e.nativeEvent.layout;
                    if (height === wrapperMeasuredHeightAnimated.get()) {
                        return;
                    }
                    contentMeasuredWidthAnimated.set(width)
                    wrapperMeasuredHeightAnimated.set(height);
                    setContentMeasuredWidth(width)
                    setWrapperMeasuredHeight(height)
                }}

Detail

Demo Videos

Before	After
before.mp4	after.mp4

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)

N/A

[mananjadhav]

I think the proposal would work. I tested the code diff but will need to test thoroughly with the PR. I am going to check with an internal engineer if we're okay to remove the setTimeout.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

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