[lexical-react] menu positioning: Unrevert PR6510 but with gating (#6566

)
facebook · Aug 28, 2024 · cd934af · cd934af
1 parent 0683d58
commit cd934af
Showing 1 changed file with 16 additions and 3 deletions.
diff --git 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__EXPERIMENTAL: 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__EXPERIMENTAL ? 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__EXPERIMENTAL ? window.pageYOffset : 0)
           }px`;
         }
       }
@@ -538,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();