Triggered auto assignment to @techievivek (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

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.

💬 A slack conversation has been started in #expensify-open-source

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

not reproducible when disable Use Staging Server

Edited by proposal-police: This proposal was edited at 2024-12-27 09:30:08 UTC.

Proposal

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

Web - Reports - Filters button tooltip is not displayed properly

What is the root cause of that problem?

The tooltip displayed here

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

To resolve this issue, we can:

• Update shiftHorizontal to 0.
• Set anchorAlignment.horizontal to CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER, similar to how it is handled in SearchTypeMenuNarrow.
  NOTE: In the SearchPageHeader component, In the SearchPageHeader component, since the children inside SearchPageHeaderInput are rendered conditionally based on isCannedQuery, we also need to ensure that isCannedQuery is checked appropriately

 <EducationalTooltip
                        shouldRender={shouldShowProductTrainingTooltip}
                        anchorAlignment={{
                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                            horizontal: isWebOrDesktop && !isCannedQuery ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                        }}
                        shouldUseOverlay
                        shiftHorizontal={isWebOrDesktop && !isCannedQuery ? 0 : variables.searchFiltersTooltipShiftHorizontal}
                        wrapperStyle={styles.productTrainingTooltipWrapper}
                        renderTooltipContent={renderProductTrainingTooltip}
                        onHideTooltip={hideProductTrainingTooltip}
                    >

POC

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

Not a blocker, sending it to external.

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

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

Updated proposal #54596 (comment)
We need to ensure that isCannedQuery is checked as well.

Proposal

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

Tooltip is incorrectly displayed.
The arrow is under Filters button, but the content (the box) is far away from the arrow.

What is the root cause of that problem?

We're calculating the horizontalShift here:

and we're assuming the tooltip position is at the center of target

but the tooltip position can be right, left, and center

so the tooltipLeftEdge and tooltipRightEdge are incorrect

that trigger the logic here (even though the tooltip right edge can't be over the window right edge since it's the RIGHT here
)

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

1. Calculate rootWrapperLeft and pointerWrapperLeft based on xOffset, manualShiftHorizontal and anchorAlignment

2. Calculate the horizontalShift after getting rootWrapperLeft here so if the tooltip is hidden by window edge, the horizontalShift will be used to adjust

const computeHorizontalShift: ComputeHorizontalShift = (windowWidth, tooltipLeftEdge, tooltipWidth) => {
    const tooltipRightEdge = tooltipLeftEdge   tooltipWidth

    if (tooltipLeftEdge < GUTTER_WIDTH) {
        // Tooltip is in left gutter, shift right by a multiple of four.
        return roundToNearestMultipleOfFour(GUTTER_WIDTH - tooltipLeftEdge);
    }

    if (tooltipRightEdge > windowWidth - GUTTER_WIDTH) {
        // Tooltip is in right gutter, shift left by a multiple of four.
        return roundToNearestMultipleOfFour((windowWidth - GUTTER_WIDTH - tooltipRightEdge));
    }

    // Tooltip is not in the gutter, so no need to shift it horizontally
    return 0;
};

4. Then update rootWrapperLeft and pointerWrapperLeft with horizontalShift

rootWrapperLeft = xOffset   manualShiftHorizontal;
            switch (anchorAlignment.horizontal) {
                case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT:
                    pointerWrapperLeft = POINTER_WIDTH / 2;
                    break;
                case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT:
                    pointerWrapperLeft = (tooltipWidth - POINTER_WIDTH * 1.5);
                    rootWrapperLeft  = tooltipTargetWidth - tooltipWidth;
                    break;
                case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER:
                default:
                    pointerWrapperLeft = (tooltipWidth / 2 - POINTER_WIDTH / 2);
                    rootWrapperLeft  = tooltipTargetWidth / 2 - tooltipWidth / 2;
            }

            horizontalShift = computeHorizontalShift(windowWidth, rootWrapperLeft, tooltipWidth);

            // Determine if we need to shift the pointer horizontally to prevent it from being too near to the edge of the tooltip
            // We shift it to the right a bit if the tooltip is positioned on the extreme left
            // and shift it to left a bit if the tooltip is positioned on the extreme right.
            horizontalShiftPointer =
                horizontalShift > 0
                    ? Math.max(-horizontalShift, -(tooltipWidth / 2)   POINTER_WIDTH / 2   variables.componentBorderRadiusSmall)
                    : Math.min(-horizontalShift, tooltipWidth / 2 - POINTER_WIDTH / 2 - variables.componentBorderRadiusSmall);
            
            rootWrapperLeft  = horizontalShift;
            pointerWrapperLeft  = horizontalShiftPointer;

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

What alternative solutions did you explore? (Optional)

NA

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.

Result