Position menu immediately (#7181)

Co-authored-by: Sherry Wong <potatowagon@fb.com>
facebook · Feb 17, 2025 · 9deab94 · 9deab94
1 parent f3983c5
commit 9deab94
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/...es/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs b/...es/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs
@@ -35,7 +35,10 @@ test.describe('ContextMenuCopyAndPaste', () => {
     await doubleClick(page, 'div[contenteditable="false"] span');
     await withExclusiveClipboardAccess(async () => {
       await click(page, 'div[contenteditable="false"] span', {button: 'right'});
-      await click(page, '#typeahead-menu [role="option"] :text("Copy")');
+      await click(
+        page,
+        'div[class="typeahead-popover"] [role="option"] :text("Copy")',
+      );
 
       await click(page, '.unlock');
       await focusEditor(page);
@@ -78,7 +81,10 @@ test.describe('ContextMenuCopyAndPaste', () => {
 
       await doubleClick(page, 'div[contenteditable="false"] span');
       await click(page, 'div[contenteditable="false"] span', {button: 'right'});
-      await click(page, '#typeahead-menu [role="option"] :text("Copy")');
+      await click(
+        page,
+        'div[class="typeahead-popover"] [role="option"] :text("Copy")',
+      );
 
       await click(page, '.unlock');
       await focusEditor(page);

diff --git a/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs b/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
@@ -713,7 +713,10 @@ test.describe.parallel('Tables', () => {
         focusPath: [1, ...WRAPPER, 1, 0, 0, 0, 0],
       });
 
-      await waitForSelector(page, `#typeahead-menu ul li:first-child.selected`);
+      await waitForSelector(
+        page,
+        `div[class="typeahead-popover mentions-menu"] ul li:first-child.selected`,
+      );
 
       await moveDown(page, 1);
       await assertSelection(page, {
@@ -725,7 +728,7 @@ test.describe.parallel('Tables', () => {
 
       await waitForSelector(
         page,
-        '#typeahead-menu ul li:nth-child(2).selected',
+        'div[class="typeahead-popover mentions-menu"] ul li:nth-child(2).selected',
       );
     });
   });
@@ -5538,7 +5541,10 @@ test.describe.parallel('Tables', () => {
         await click(page, 'div[contenteditable] th p', {
           button: 'right',
         });
-        await click(page, '#typeahead-menu [role="option"] :text("Cut")');
+        await click(
+          page,
+          'div[class="typeahead-popover"] [role="option"] :text("Cut")',
+        );
       });
 
       await assertHTML(

diff --git a/packages/lexical-react/src/shared/LexicalMenu.ts b/packages/lexical-react/src/shared/LexicalMenu.ts
@@ -491,7 +491,6 @@ export function useMenuAnchorRef(
   const anchorElementRef = useRef<HTMLElement | null>(
     CAN_USE_DOM ? document.createElement('div') : null,
   );
-  const hasPositioned = useRef(false);
   const positionMenu = useCallback(() => {
     if (anchorElementRef.current === null || parent === undefined) {
       return;
@@ -562,12 +561,6 @@ export function useMenuAnchorRef(
     parent,
   ]);
 
-  // position menu on first render
-  if (!hasPositioned.current) {
-    positionMenu();
-    hasPositioned.current = true;
-  }
-
   useEffect(() => {
     const rootElement = editor.getRootElement();
     if (resolution !== null) {
@@ -603,6 +596,15 @@ export function useMenuAnchorRef(
     onVisibilityChange,
   );
 
+  // Append the context for the menu immediately
+  const containerDiv = anchorElementRef.current;
+  if (containerDiv != null) {
+    containerDiv.style.position = 'absolute';
+    if (parent != null) {
+      parent.append(containerDiv);
+    }
+  }
+
   return anchorElementRef;
 }