[Hold for #54924] Reports -"Customize your search here" tooltip is scrolled with the messages in chats section

[lanitochka17]

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.89-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the Expensify app
2. Tap on "Reports" on the bottom of the screen
3. Tap on the dropdown menu and select "Chats"
4. Scroll down through the messages list
5. Check the "Customize your search here" tooltip behaviour while scrolling

Expected Result:

"Customize your search here" tooltip should disappear when scrolling down

Actual Result:

"Customize your search here" tooltip is scrolled down along with the messages list on "Chats" section while scrolling

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

Bug6722240_1737671581902.Customize.mp4

View all open jobs on GitHub

[melvin-bot]

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

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-24 02:04:47 UTC.

Proposal

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

"Customize your search here" tooltip is scrolled down along with the messages list on "Chats" section while scrolling

What is the root cause of that problem?

The "Customize your search here" tooltip is anchored to a component whose position changes when scrolling. However, the tooltip's position does not update accordingly:

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

Line 81 in d930fea

const {rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(

As a result, when scrolling occurs, the tooltip remains fixed in its original position, no longer aligning with the component.

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

The tooltip should detect when the position of its anchor component changes and update its style accordingly to maintain proper alignment. In this solution, I will hide the tooltip if the scroll offset is greater than 0.

In here, we pass scrollOffset animated value:

                            <SearchTypeMenu scrollOffset={scrollOffset} .../>

The scrollOffset will be passed down to this place, and we use it as:

    const animationStyleZIndex = useAnimatedStyle(() => {
        if (scrollOffset.get() > 10) {
            return {zIndex: -1};
        }
        return {zIndex: variables.tooltipzIndex};
    });

Finally use that animated styles in here:

                style={[rootWrapperStyle, animationStyle, animationStyleZIndex]}

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)

We can use:

    const animationStyleBottom = useAnimatedStyle(() => {
        if (scrollOffset.get() > 10) {
            return {top: rootWrapperStyle.top - scrollOffset.get()};
        }
        return {top: rootWrapperStyle.top};
    });

instead of animationStyleZIndex in main solution.

[linhvovan29546]

It seems this might be resolved with #54924

[melvin-bot]

@RachCHopkins Whoops! This issue is 2 days overdue. Let's get this updated quick!

[RachCHopkins]

Good call @linhvovan29546 that looks identical. Let's hold on that PR then retest.

[RachCHopkins]

Not overdue, holding.

[melvin-bot]

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

[RachCHopkins]

#54924 is still trucking along.