From 21cb22c796261e28f81bbd93e937fd3c82d5b394 Mon Sep 17 00:00:00 2001
From: Sherry Wong <potatowagon@fb.com>
Date: Wed, 28 Aug 2024 00:54:15 +0800
Subject: [PATCH 1/2] gate

---
 packages/lexical-react/src/shared/LexicalMenu.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/lexical-react/src/shared/LexicalMenu.ts b/packages/lexical-react/src/shared/LexicalMenu.ts
index 590e5cfdc57..aed84e7ce86 100644
--- a/packages/lexical-react/src/shared/LexicalMenu.ts
+++ b/packages/lexical-react/src/shared/LexicalMenu.ts
@@ -482,6 +482,7 @@ export function useMenuAnchorRef(
   setResolution: (r: MenuResolution | null) => void,
   className?: string,
   parent: HTMLElement = document.body,
+  shouldIncludePageYOffset: boolean = true,
 ): MutableRefObject<HTMLElement> {
   const [editor] = useLexicalComposerContext();
   const anchorElementRef = useRef<HTMLElement>(document.createElement('div'));
@@ -495,7 +496,10 @@ export function useMenuAnchorRef(
       const {left, top, width, height} = resolution.getRect();
       const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
       containerDiv.style.top = `${
-        top + window.pageYOffset + anchorHeight + 3
+        top +
+        anchorHeight +
+        3 +
+        (shouldIncludePageYOffset ? window.pageYOffset : 0)
       }px`;
       containerDiv.style.left = `${left + window.pageXOffset}px`;
       containerDiv.style.height = `${height}px`;
@@ -519,7 +523,10 @@ export function useMenuAnchorRef(
           top - rootElementRect.top > menuHeight + height
         ) {
           containerDiv.style.top = `${
-            top - menuHeight + window.pageYOffset - height
+            top -
+            menuHeight -
+            height +
+            (shouldIncludePageYOffset ? window.pageYOffset : 0)
           }px`;
         }
       }

From 8dbc6bfc121dc97c13d9be6c1e38be81c3a9d82b Mon Sep 17 00:00:00 2001
From: Sherry Wong <potatowagon@fb.com>
Date: Wed, 28 Aug 2024 10:06:08 +0800
Subject: [PATCH 2/2] suffix with experimental

---
 packages/lexical-react/src/shared/LexicalMenu.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/lexical-react/src/shared/LexicalMenu.ts b/packages/lexical-react/src/shared/LexicalMenu.ts
index aed84e7ce86..42877233258 100644
--- a/packages/lexical-react/src/shared/LexicalMenu.ts
+++ b/packages/lexical-react/src/shared/LexicalMenu.ts
@@ -482,7 +482,7 @@ export function useMenuAnchorRef(
   setResolution: (r: MenuResolution | null) => void,
   className?: string,
   parent: HTMLElement = document.body,
-  shouldIncludePageYOffset: boolean = true,
+  shouldIncludePageYOffset__EXPERIMENTAL: boolean = true,
 ): MutableRefObject<HTMLElement> {
   const [editor] = useLexicalComposerContext();
   const anchorElementRef = useRef<HTMLElement>(document.createElement('div'));
@@ -499,7 +499,7 @@ export function useMenuAnchorRef(
         top +
         anchorHeight +
         3 +
-        (shouldIncludePageYOffset ? window.pageYOffset : 0)
+        (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0)
       }px`;
       containerDiv.style.left = `${left + window.pageXOffset}px`;
       containerDiv.style.height = `${height}px`;
@@ -526,7 +526,7 @@ export function useMenuAnchorRef(
             top -
             menuHeight -
             height +
-            (shouldIncludePageYOffset ? window.pageYOffset : 0)
+            (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0)
           }px`;
         }
       }
@@ -545,7 +545,13 @@ export function useMenuAnchorRef(
       anchorElementRef.current = containerDiv;
       rootElement.setAttribute('aria-controls', 'typeahead-menu');
     }
-  }, [editor, resolution, className, parent]);
+  }, [
+    editor,
+    resolution,
+    shouldIncludePageYOffset__EXPERIMENTAL,
+    className,
+    parent,
+  ]);
 
   useEffect(() => {
     const rootElement = editor.getRootElement();