[$250] Tooptip loses position when screen is resized

[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: @MitchExpensify
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. On desktop or web, sign up with a new account and complete the onboarding modal steps
2. Resize your screen

Expected Result:

The tooltip keeps its correct position regardless of screen size

Actual Result:

The tooltip loses its position

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/~021881664477541067956
• Upwork Job ID: 1881664477541067956
• Last Price Increase: 2025-01-21
• Automatic offers:
• ZhenjaHorbach | Contributor | 105788594

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Current assignee @zanyrenney is eligible for the Bug assigner, not assigning anyone new.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[ZhenjaHorbach]

Can reproduce.
Please assign me C+ as per https://expensify.slack.com/archives/C02NK2DQWUX/p1737122834680949

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-05 07:45:45 UTC.

Proposal

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

The tooltip doesn't keep its position when screen is resized.

What is the root cause of that problem?

The tooltip position is only measured once when the tooltip is going to show.

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

Line 76 in efabde3

show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);

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

Lines 37 to 40 in efabde3

	const timerID = setTimeout(() => {
	show.current?.();
	}, 500);
	return () => {

When the screen is resized, in this case, the height, the position value stays the same, so it will be out of position.

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

We have 3 options.

First, we can attach a dimension listener and remeasure it.

// a new ref, reposition
reposition.current = () => measureTooltipCoordinate(target, updateTargetBounds, () => {});

useEffect(() => {
    const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
        reposition.current?.();
    });
    return emojiPopoverDimensionListener.remove;
}, []);

This is how it looks:

a1.mp4

The 2nd option is to adjust the tooltip position based on the window size delta. Currently, the position is defined by xOffset and yOffset. This is the offset where the tooltip is measured.

App/src/components/Tooltip/GenericTooltip.tsx

Lines 171 to 172 in efabde3

	xOffset={xOffset}
	yOffset={yOffset}

We can subtract the offset to the difference of the current window size with the last window size when we measure the position.

yOffset={yOffset - (lastWindowSizeWhenMeasured.current.h - windowHeight)}

App/src/components/Tooltip/GenericTooltip.tsx

Lines 121 to 130 in efabde3

	const updateTargetBounds = (bounds: LayoutRectangle) => {
	if (bounds.width === 0) {
	setIsRendered(false);
	}
	setWrapperWidth(bounds.width);
	setWrapperHeight(bounds.height);
	setXOffset(bounds.x);
	setYOffset(bounds.y);
	};

lastWindowSizeWhenMeasured.current = {w: windowWidthRef.current, h: windowHeightRef.current};

We need to create windowWidthRef and windowHeightRef to hold the up-to-date window size state because updateTargetBounds is passed down to the educational tooltip onLayout callback, so the function is only updated on every onLayout.

const windowWidthRef = useRef(windowWidth);
const windowHeightRef = useRef(windowHeight);

windowWidthRef.current = windowWidth;
windowHeightRef.current = windowHeight;

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

Lines 128 to 135 in a8ea179

	onLayout: (e: LayoutChangeEventWithTarget) => {
	if (!shouldMeasure) {
	setShouldMeasure(true);
	}
	// e.target is specific to native, use e.nativeEvent.target on web instead
	const target = e.target || e.nativeEvent.target;
	tooltipElementRef.current = target;
	show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);

This is how it looks:

a2.mp4

The last option is to use BoundsObserver just like how we use it in BaseTooltip.

App/src/components/Tooltip/BaseTooltip/index.tsx

Lines 102 to 108 in efabde3

	<BoundsObserver
	enabled={isVisible}
	onBoundsChange={(bounds) => {
	updateTargetBounds(getBounds(bounds));
	}}
	ref={ref}
	>

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

Lines 58 to 81 in efabde3

	return (
	<GenericTooltip
	shouldForceAnimate
	shouldRender={shouldRender}
	isEducationTooltip
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	>
	{({showTooltip, hideTooltip, updateTargetBounds}) => {
	// eslint-disable-next-line react-compiler/react-compiler
	hideTooltipRef.current = hideTooltip;
	return React.cloneElement(children as React.ReactElement, {
	onLayout: (e: LayoutChangeEventWithTarget) => {
	if (!shouldMeasure) {
	setShouldMeasure(true);
	}
	// e.target is specific to native, use e.nativeEvent.target on web instead
	const target = e.target || e.nativeEvent.target;
	show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
	},
	});
	}}
	</GenericTooltip>
	);

return (
    <BoundsObserver
        enabled={shouldRender}
        onBoundsChange={() => {
            if (targetRef.current) {
                measureTooltipCoordinate(targetRef.current, updateTargetBounds, () => {});
            }
        }}
    >
        {React.cloneElement(children as React.ReactElement, {
            onLayout: (e: LayoutChangeEventWithTarget) => {
                if (!shouldMeasure) {
                    setShouldMeasure(true);
                }
                // e.target is specific to native, use e.nativeEvent.target on web instead
                const target = e.target || e.nativeEvent.target;
                // new ref
                targetRef.current = target;
                show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
            },
        })}
    </BoundsObserver>    
);

This is how it looks:

a3.mp4

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

N/A

[ishakakkad]

Proposal

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

Tooptip loses position when screen is resized

What is the root cause of that problem?

When the screen size changes, the tooltip position is not reset, causing it to lose its correct position upon resizing

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

To resolve this issue, we need to wrap the content of the GenericTooltip in a BoundsObserver. The following changes in BaseEducationalTooltip.tsx will address the problem.

<BoundsObserver
    enabled={shouldRender}
    onBoundsChange={(bounds) => {
        updateTargetBounds(bounds);
    }}
>
    {React.cloneElement(children as React.ReactElement, {
        onLayout: (e: LayoutChangeEventWithTarget) => {
            if (!shouldMeasure) {
                setShouldMeasure(true);
            }
            // e.target is specific to native, use e.nativeEvent.target on web instead
            const target = e.target || e.nativeEvent.target;
            show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
        },
    })}
</BoundsObserver> 

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

UI Bug so not needed

What alternative solutions did you explore? (Optional)

[melvin-bot]

@zanyrenney Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!