[lexical-react] Bug Fix: the node context menu leaves the native menu alone when it has nothing to show

packages/lexical-react/src/LexicalNodeContextMenuPlugin.tsx

@@ -221,6 +221,26 @@ const NodeContextMenuPlugin = forwardRef<
 
   useEffect(() => {
     function onContextMenu(e: MouseEvent) {
+      let visibleItems: ContextMenuType[] = [];
+      if (items) {
+        editor.read(() => {
+          const node =
+            $getNearestNodeFromDOMNode(e.target as Element) ?? $getRoot();
+          if (node) {
+            visibleItems = items!.filter(option =>
+              option.$showOn ? option.$showOn(node) : true,
+            );
+          }
+        });
+      }
+
+      // Every item is hidden for this node, so there is no menu to show. Let
+      // the browser's own context menu open rather than suppressing it and
+      // mounting a scroll-locking overlay around nothing.
+      if (visibleItems.length === 0) {
+        return;
+      }
+
       e.preventDefault();
 
       refs.setPositionReference({
@@ -238,19 +258,6 @@ const NodeContextMenuPlugin = forwardRef<
         },
       });
 
-      let visibleItems: ContextMenuType[] = [];
-      if (items) {
-        editor.read(() => {
-          const node =
-            $getNearestNodeFromDOMNode(e.target as Element) ?? $getRoot();
-          if (node) {
-            visibleItems = items!.filter(option =>
-              option.$showOn ? option.$showOn(node) : true,
-            );
-          }
-        });
-      }
-
       const renderableItems = visibleItems.map((option, index) => {
         if (option.type === 'separator') {
           return {

packages/lexical-react/src/__tests__/unit/LexicalNodeContextMenuPlugin.test.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {
+  NodeContextMenuOption,
+  NodeContextMenuPlugin,
+} from '@lexical/react/LexicalNodeContextMenuPlugin';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+const MENU_CLASS = 'node-context-menu';
+
+describe('NodeContextMenuPlugin', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+  });
+
+  async function renderPlugin(showOn: boolean): Promise<void> {
+    const items = [
+      new NodeContextMenuOption('Do a thing', {
+        $onSelect: vi.fn(),
+        $showOn: () => showOn,
+      }),
+    ];
+    await act(async () => {
+      reactRoot.render(
+        <LexicalComposer
+          initialConfig={{
+            namespace: 'context-menu',
+            onError: (error: Error) => {
+              throw error;
+            },
+          }}>
+          <RichTextPlugin
+            contentEditable={<ContentEditable />}
+            ErrorBoundary={({children}) => <>{children}</>}
+          />
+          <NodeContextMenuPlugin className={MENU_CLASS} items={items} />
+        </LexicalComposer>,
+      );
+    });
+  }
+
+  async function rightClick(): Promise<MouseEvent> {
+    const rootElement = container.querySelector(
+      '[contenteditable="true"]',
+    ) as HTMLElement;
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+    });
+    await act(async () => {
+      rootElement.dispatchEvent(event);
+    });
+    return event;
+  }
+
+  function isMenuOpen(): boolean {
+    return document.querySelector(`.${MENU_CLASS}`) !== null;
+  }
+
+  it('leaves the native context menu alone when no item is shown', async () => {
+    await renderPlugin(false);
+
+    const event = await rightClick();
+    expect(event.defaultPrevented).toBe(false);
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  it('opens and replaces the native context menu when an item is shown', async () => {
+    await renderPlugin(true);
+
+    const event = await rightClick();
+    expect(event.defaultPrevented).toBe(true);
+    expect(isMenuOpen()).toBe(true);
+  });
+});