[Due for payment 2025-03-21] [$250] Submit expenses and chat with approver tooltip appears at the top of the page sometimes

[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: v9.0.81-6
Reproducible in staging?: yes
Reproducible in production?: yes
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: @flaviadefaria
Slack conversation (hyperlinked to channel name): migrate

Action Performed:

1. Go to staging.new.expensify.com and create an account
2. Open the workspace chat and submit an expense
3. Observe the tooltip for "submit expense and chat with approvers here"

Expected Result:

Should appear with in the report active window

Actual Result:

sometimes displays at the top of the page. Also when I scroll down the chats on the LHP it stays static rather than following the workspace that it is pointing to.

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

2025-01-06_21-26-00.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021878933333602082321
• Upwork Job ID: 1878933333602082321
• Last Price Increase: 2025-01-20

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[MelvinBot]

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

[hoangzinh]

I'm able to reproduce this issue with either new accounts

1. Go to staging.new.expensify.com
2. Sign in with newly account
3. Create a workspace
4. Submit an expense on the workspace chat
5. On the LHN, observe the product training tooltip for "submit expense and chat with approvers here"

or set Onyx.set('nvp_dismissedProductTraining', {})

1. Go to staging.new.expensify.com
2. Sign in with any account
3. Run Onyx.set('nvp_dismissedProductTraining', {}) to reset product training steps
4. Create a workspace
5. Submit an expense on the workspace chat
6. On the LHN, observe the product training tooltip for "submit expense and chat with approvers here"

Screen.Recording.2025-01-08.at.17.42.22.mov

[hoangzinh]

Please assign me as a C+ for this issue. Thank you.

[M00rish]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-17 14:57:08 UTC.

Proposal

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

Submit expenses and chat with approver tooltip appears at the top of the page sometimes

What is the root cause of that problem?

there's no mechanism set to handle scrolling events

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

in educationalToolTip

a more straight forward appraoch, is chekking if element is within view port, this is flexible way to deal with all pages

Details

    const targetRef = useRef<any | null>(null);
    const wasTooltipActive = useRef(false);
    const checkVisibilityIntervalRef = useRef<number | null>(null);

    const isElementInViewport = useCallback((element: HTMLElement) => {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }, []);

    const checkVisibility = useCallback(() => {
        if (!targetRef.current || !(targetRef.current instanceof HTMLElement)) {
            return;
        }

        const isVisible = isElementInViewport(targetRef.current);
        
        if (!isVisible) {
            wasTooltipActive.current = true;
            hideTooltipRef.current?.();
        } else if (wasTooltipActive.current) {
            showTooltipRef.current?.();
            wasTooltipActive.current = false;
        }
    }, [isElementInViewport]);

    useEffect(() => {
        if (!shouldRender) {
            return;
        }

        checkVisibility();

        checkVisibilityIntervalRef.current = window.setInterval(checkVisibility, 100);

        const handleScrollOrResize = () => {
            checkVisibility();
        };

        window.addEventListener('scroll', handleScrollOrResize, true);
        window.addEventListener('resize', handleScrollOrResize);

        return () => {
            if (checkVisibilityIntervalRef.current) {
                clearInterval(checkVisibilityIntervalRef.current);
            }
            window.removeEventListener('scroll', handleScrollOrResize, true);
            window.removeEventListener('resize', handleScrollOrResize);
        };
    }, [shouldRender, checkVisibility]);

    const navigator = useContext(NavigationContext);

    useEffect(() => {
        return () => {
            hideTooltipRef.current?.();
            if (checkVisibilityIntervalRef.current) {
                clearInterval(checkVisibilityIntervalRef.current);
            }
        };
    }, []);

the above is for web only to include native, it could be something similar to this :

Details

const targetRef = useRef<any>(null);
  const wasTooltipActive = useRef(false);
  const checkVisibilityIntervalRef = useRef<number | null>(null);

  const isElementInViewport = useCallback((measurements: { 
    x: number; 
    y: number; 
    width: number; 
    height: number; 
  }) => {
    if (Platform.OS === 'web') {
      // Web implementation
      return (
        measurements.y >= 0 &&
        measurements.x >= 0 &&
        measurements.y + measurements.height <= (window.innerHeight || document.documentElement.clientHeight) &&
        measurements.x + measurements.width <= (window.innerWidth || document.documentElement.clientWidth)
      );
    } else {
      // React Native implementation
      const windowDimensions = Dimensions.get('window');
      return (
        measurements.y >= 0 &&
        measurements.x >= 0 &&
        measurements.y + measurements.height <= windowDimensions.height &&
        measurements.x + measurements.width <= windowDimensions.width
      );
    }
  }, []);

  const getMeasurements = useCallback(() => {
    return new Promise<{ x: number; y: number; width: number; height: number } | null>((resolve) => {
      if (Platform.OS === 'web') {
        if (!targetRef.current || !(targetRef.current instanceof HTMLElement)) {
          resolve(null);
          return;
        }
        const rect = targetRef.current.getBoundingClientRect();
        resolve({
          x: rect.left,
          y: rect.top,
          width: rect.width,
          height: rect.height,
        });
      } else {
        if (!targetRef.current) {
          resolve(null);
          return;
        }
        targetRef.current.measure((_x: number, _y: number, width: number, height: number, pageX: number, pageY: number) => {
          resolve({
            x: pageX,
            y: pageY,
            width,
            height,
          });
        });
      }
    });
  }, []);

  const checkVisibility = useCallback(async () => {
    const measurements = await getMeasurements();
    if (!measurements) return;

    const isVisible = isElementInViewport(measurements);
    
    if (!isVisible) {
      wasTooltipActive.current = true;
      hideTooltipRef.current?.();
    } else if (wasTooltipActive.current) {
      showTooltipRef.current?.();
      wasTooltipActive.current = false;
    }
  }, [isElementInViewport, getMeasurements]);

  useEffect(() => {
    if (!shouldRender) {
      return;
    }

    checkVisibility();

    if (Platform.OS === 'web') {
      // Web-specific event listeners
      checkVisibilityIntervalRef.current = window.setInterval(checkVisibility, 100);
      const handleScrollOrResize = () => {
        checkVisibility();
      };
      window.addEventListener('scroll', handleScrollOrResize, true);
      window.addEventListener('resize', handleScrollOrResize);

      return () => {
        if (checkVisibilityIntervalRef.current) {
          clearInterval(checkVisibilityIntervalRef.current);
        }
        window.removeEventListener('scroll', handleScrollOrResize, true);
        window.removeEventListener('resize', handleScrollOrResize);
      };
    } else {
      // React Native-specific listeners
      checkVisibilityIntervalRef.current = setInterval(checkVisibility, 100);
      const dimensionsSubscription = Dimensions.addEventListener('change', checkVisibility);

      return () => {
        if (checkVisibilityIntervalRef.current) {
          clearInterval(checkVisibilityIntervalRef.current);
        }
        dimensionsSubscription.remove();
      };
    }
  }, [shouldRender, checkVisibility]);

  const navigator = useContext(NavigationContext);

  useEffect(() => {
    return () => {
      hideTooltipRef.current?.();
      if (checkVisibilityIntervalRef.current) {
        clearInterval(checkVisibilityIntervalRef.current);
      }
    };
  }, []);

....
return (
        <GenericTooltip
            shouldForceAnimate
            shouldRender={shouldRender}
            {...props}
        >
            {({showTooltip, hideTooltip, updateTargetBounds}) => {
                hideTooltipRef.current = hideTooltip;
                showTooltipRef.current = showTooltip;
                return (
                    <BoundsObserver
                        enabled={shouldRender}
                        onBoundsChange={(bounds) => {
                            updateTargetBounds(bounds);
                        }}
                    >
                        {React.cloneElement(children as React.ReactElement, {   
                            onLayout: (e: LayoutChangeEventWithTarget) => {
                                if (!shouldMeasure) {
                                    setShouldMeasure(true);
                                }
                                const target = e.target || e.nativeEvent.target;
                                targetRef.current = target;

                                show.current = () => {
                                    wasTooltipActive.current = true;
                                    measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
                                };

                                if (target instanceof HTMLElement) {
                                    checkVisibility();
                                }
                            },
                        })}
                    </BoundsObserver>
                );
            }}
        </GenericTooltip>
    );

}
                                }

could be polished in PR phase

Details

bandicam.2025-01-17.14-48-36-976.mp4

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

UI issue

What alternative solutions did you explore? (Optional)

[ishpaul777]

@hoangzinh feel free to take over, just coming here from here to say that similar thing happen to filter button tooltip when we scroll the expenses on small screens, Make sure we fix it and other tooltips where this potentially happens

[ishpaul777]

also the expected behaviour is not show tooltip it if element it is pointing to is not in the visible view and ideally we keep the tooltip on it while scrolling pointing to element. Or if that's too hard, have it disappear while scrolling and re-appear once they stop (if the chat is still visible) - https://expensify.slack.com/archives/C07NMDKEFMH/p1736277111466739?thread_ts=1736274954.289009&cid=C07NMDKEFMH

[flaviadefaria]

Please assign me as a C+ for this issue. Thank you.

Done!

[M00rish]

@ishpaul777 @hoangzinh ,
is it not more intuitive to make it appear when user is not on the active worksapce ? and when user clicks the workspace it appears on the composer ?

I guess it's supposed to be educational meaning it leads the user through the app ... I think:

Details

bandicam.2025-01-09.16-56-43-609.mp4

just trying to check the expected outcome here