Merge pull request #39143 from dukenv0307/fix/39044

Only switch position if it is possible (cherry picked from commit fd56f5a)
Expensify · Mar 28, 2024 · aa8c3e8 · aa8c3e8
1 parent a29e13f
commit aa8c3e8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/libs/PopoverWithMeasuredContentUtils.ts b/src/libs/PopoverWithMeasuredContentUtils.ts
@@ -37,15 +37,18 @@ function computeHorizontalShift(anchorLeftEdge: number, menuWidth: number, windo
  */
 function computeVerticalShift(anchorTopEdge: number, menuHeight: number, windowHeight: number, anchorHeight: number, shoudSwitchPositionIfOverflow = false): number {
     const popoverBottomEdge = anchorTopEdge + menuHeight;
+    let canSwitchPosition = false;
 
     if (anchorTopEdge < 0) {
         // Anchor is in top window Edge, shift bottom by a multiple of four.
-        return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow ? menuHeight + anchorHeight : 0 - anchorTopEdge);
+        canSwitchPosition = popoverBottomEdge + menuHeight + anchorHeight <= windowHeight;
+        return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow && canSwitchPosition ? menuHeight + anchorHeight : 0 - anchorTopEdge);
     }
 
     if (popoverBottomEdge > windowHeight) {
         // Anchor is in Bottom window Edge, shift top by a multiple of four.
-        return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow ? -(menuHeight + anchorHeight) : windowHeight - popoverBottomEdge);
+        canSwitchPosition = anchorTopEdge - menuHeight - anchorHeight >= 0;
+        return roundToNearestMultipleOfFour(shoudSwitchPositionIfOverflow && canSwitchPosition ? -(menuHeight + anchorHeight) : windowHeight - popoverBottomEdge);
     }
 
     // Anchor is not in the gutter, so no need to shift it vertically

diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx
@@ -62,6 +62,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
     const [isChatPinned, setIsChatPinned] = useState(false);
     const [hasUnreadMessages, setHasUnreadMessages] = useState(false);
     const [disabledActions, setDisabledActions] = useState<ContextMenuAction[]>([]);
+    const [shoudSwitchPositionIfOverflow, setShoudSwitchPositionIfOverflow] = useState(false);
 
     const contentRef = useRef<View>(null);
     const anchorRef = useRef<View | HTMLDivElement | null>(null);
@@ -218,6 +219,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
             setIsChronosReportEnabled(isChronosReport);
             setIsChatPinned(isPinnedChat);
             setHasUnreadMessages(isUnreadChat);
+            setShoudSwitchPositionIfOverflow(isOverflowMenu);
         });
     };
 
@@ -328,7 +330,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
                 withoutOverlay
                 anchorDimensions={contextMenuDimensions.current}
                 anchorRef={anchorRef}
-                shoudSwitchPositionIfOverflow
+                shoudSwitchPositionIfOverflow={shoudSwitchPositionIfOverflow}
             >
                 <BaseReportActionContextMenu
                     isVisible