[Due for payment 2025-08-15] [$250] Try it out-"Scan our test receipt" tooltip appears in the wrong place when entering recipient

[mitarachim]

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.1.78
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #64988
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: MacBook Air 15.5 Chrome
App Component: Other

Action Performed:

1. Navigate to the staging.new.expensify.com, sign in with a brand new gmail account
2. Click green "+" button - "Create expense"
3. Verify that the "Scan our test receipt to see how it works" tooltip is displayed
4. Click "Choose file" and upload a receipt
5. Start typing an email address in the "Choose recipient" field

Expected Result:

"Scan our test receipt to see how it works" tooltip does not appear in the wrong place

Actual Result:

"Scan our test receipt to see how it works" tooltip appears in the wrong place when typing a recipient email

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6881940_1752013004292.Try_it_out.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021942969193363705065
• Upwork Job ID: 1942969193363705065
• Last Price Increase: 2025-07-23
• Automatic offers:
• nkdengineer | Contributor | 108205667

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @lschurr (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]

Proposal

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

Try it out-"Scan our test receipt" tooltip appears in the wrong place when entering recipient

What is the root cause of that problem?

The IOURequestStartPage remains behind the choose receipt page. Since the tooltip display logic is in IOURequestStartPage, the tooltip continues to display even when the user is on the choose receipt page.

App/src/pages/iou/request/IOURequestStartPage.tsx

Lines 155 to 157 in 15c2eb6

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	!getIsUserSubmittedExpenseOrScannedReceipt() && isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) && selectedTab === CONST.TAB_REQUEST.SCAN,

Since the SCAN_TEST_TOOLTIP has a lower priority than SCAN_TEST_TOOLTIP_MANAGER, when SCAN_TEST_TOOLTIP_MANAGER is not displayed when search, SCAN_TEST_TOOLTIP will reappear.
This happened after PR #61824, where we mistake removed the logic focused.

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

We should only display the tooltip when the screen is focused.

App/src/pages/iou/request/IOURequestStartPage.tsx

Lines 155 to 157 in 15c2eb6

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	!getIsUserSubmittedExpenseOrScannedReceipt() && isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) && selectedTab === CONST.TAB_REQUEST.SCAN,

    const isFocused = useIsFocused();
    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
     isFocused &&   !getIsUserSubmittedExpenseOrScannedReceipt() && isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) && selectedTab === CONST.TAB_REQUEST.SCAN,
        {
            onConfirm: () => {
                setTestReceiptAndNavigateRef?.current?.();
            },
            onDismiss: () => {
                dismissProductTraining(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP, true);
            },
        },
    );

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)

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.

[nkdengineer]

Proposal

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

"Scan our test receipt to see how it works" tooltip appears in the wrong place when typing a recipient email

What is the root cause of that problem?

We have the logic to hide the tooltip when the page is blurred here.

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

Lines 143 to 147 in 58229fe

	const unsubscribe = navigator.addListener('blur', () => {
	if (!shouldHideOnNavigate) {
	return;
	}
	genericTooltipStateRef.current?.hideTooltip();

But when we open the participant page, the SCAN_TEST_TOOLTIP_MANAGER tooltip is shown, and because this tooltip has higher priority, shouldRender of SCAN_TEST_TOOLTIP is changed to false.

App/src/pages/iou/request/IOURequestStartPage.tsx

Lines 155 to 157 in 15c2eb6

	const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip} = useProductTrainingContext(
	CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SCAN_TEST_TOOLTIP,
	!getIsUserSubmittedExpenseOrScannedReceipt() && isBetaEnabled(CONST.BETAS.NEWDOT_MANAGER_MCTEST) && selectedTab === CONST.TAB_REQUEST.SCAN,

When the user enters a user, the MC test participant is removed, and SCAN_TEST_TOOLTIP_MANAGER is hidden. It leads shouldRender of SCAN_TEST_TOOLTIP being changed to true, and the tooltip is shown based on this useEffect.

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

Lines 122 to 135 in 58229fe

	useEffect(() => {
	if (!shouldMeasure) {
	return;
	}
	if (!shouldRender) {
	genericTooltipStateRef.current?.hideTooltip();
	return;
	}
	// When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.
	const timerID = setTimeout(() => {
	show.current?.();
	}, 500);
	return () => {
	clearTimeout(timerID);

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

Instead of fixing it case by case, we can prevent this bug from occurring on other pages by fixing it on BaseEducationalTooltip. We can create a state to determine the focus state

const [isFocused, setIsFocused] = useState(() => {
    return navigator?.isFocused?.() ?? true;
});
const unsubscribe = navigator.addListener('blur', () => {
    if (!shouldHideOnNavigate) {
        return;
    }
    setIsFocused(false);
    genericTooltipStateRef.current?.hideTooltip();
});

const unsubscribeFocus = navigator.addListener('focus', () => {
    setIsFocused(true);
});
return () => {
    unsubscribe();
    unsubscribeFocus();
};

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

Lines 143 to 147 in 58229fe

	const unsubscribe = navigator.addListener('blur', () => {
	if (!shouldHideOnNavigate) {
	return;
	}
	genericTooltipStateRef.current?.hideTooltip();

Then we will prevent showing the tooltip if isFocused is false

if (!shouldMeasure || !isFocused) {
    return;
}

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

Line 122 in 58229fe

useEffect(() => {

if (!tooltipElementRef.current || !genericTooltipStateRef.current || !isFocused) {
    return;
}

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

Line 34 in 58229fe

const renderTooltip = useCallback(() => {

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

None

What alternative solutions did you explore? (Optional)

Define a new config shouldShowOnBlur with the default value is false

App/src/components/ProductTrainingContext/index.tsx

Line 227 in 58229fe

const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shouldShow = true, config: ProductTrainingContextConfig = {}) => {

And update the shouldShowProductTrainingTooltip condition here

const shouldShowProductTrainingTooltip = useMemo(() => {
    return shouldShow && shouldRenderTooltip(tooltipName) && !shouldHideToolTip && (shouldShowOnBlur || isFocused);
}, [shouldRenderTooltip, tooltipName, shouldShow, shouldHideToolTip, shouldShowOnBlur, isFocused]);

App/src/components/ProductTrainingContext/index.tsx

Line 258 in 58229fe

const shouldShowProductTrainingTooltip = useMemo(() => {

Then for all places that we use shouldHideOnNavigate={false} we will pass shouldShowOnBlur as true to useProductTrainingContext

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.

[melvin-bot]

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

[melvin-bot]

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

[hoangzinh]

Thank you, everyone, for posting proposals. I will review them soon.

[hoangzinh]

Hi @nkdengineer, I tried to test proposal and it seems it doesn't work as expected.

Screen.Recording.2025-07-15.at.20.39.59.mov

[linhvovan29546]

@hoangzinh any thoughts on my proposal?
I don’t think using isFocused inside BaseEducationalTooltip is correct, because we have a priority logic in tooltip. With that approach, if the current screen’s tooltip has a lower priority than the previous screen’s, the tooltip will not be displayed.

And if we use that logic inside useProductTrainingContext, I have concerns about potential performance and regression issues, since useProductTrainingContext is also used within many place.

correct me if I'm wrong