[DevTools] Fix null ref crash in ContextMenu when items list is empty

Author: fresh3nough

packages/react-devtools-shared/src/__tests__/contextMenu-test.js

@@ -0,0 +1,121 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+describe('ContextMenu', () => {
+  let React;
+  let ReactDOMClient;
+  let act;
+  let ContextMenu;
+  let container;
+  let portalRoot;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    act = React.act;
+
+    ContextMenu =
+      require('react-devtools-shared/src/devtools/ContextMenu/ContextMenu').default;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    portalRoot = document.createElement('div');
+    portalRoot.setAttribute('data-react-devtools-portal-root', '');
+    document.body.appendChild(portalRoot);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    document.body.removeChild(portalRoot);
+  });
+
+  // @reactVersion >= 18
+  it('should not crash when items list is empty', () => {
+    // Simulates the real usage: ContextMenuContainer only renders ContextMenu
+    // after the anchor is already mounted (shouldShow toggled via right-click).
+    const anchorRef = React.createRef();
+    let showMenu;
+
+    function Wrapper() {
+      const [show, setShow] = React.useState(false);
+      showMenu = setShow;
+
+      return (
+        <div ref={anchorRef}>
+          {show && (
+            <ContextMenu
+              anchorElementRef={anchorRef}
+              items={[]}
+              position={{x: 0, y: 0}}
+              hide={() => setShow(false)}
+            />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    act(() => {
+      root.render(<Wrapper />);
+    });
+
+    // Now show the context menu with empty items.
+    // Should not throw "Cannot read properties of null (reading 'ownerDocument')".
+    expect(() => {
+      act(() => {
+        showMenu(true);
+      });
+    }).not.toThrow();
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  // @reactVersion >= 18
+  it('should render context menu when items are provided', () => {
+    const anchorRef = React.createRef();
+    let showMenu;
+
+    function Wrapper() {
+      const [show, setShow] = React.useState(false);
+      showMenu = setShow;
+
+      return (
+        <div ref={anchorRef}>
+          {show && (
+            <ContextMenu
+              anchorElementRef={anchorRef}
+              items={[{onClick: () => {}, content: 'Test Item'}]}
+              position={{x: 10, y: 10}}
+              hide={() => setShow(false)}
+            />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    act(() => {
+      root.render(<Wrapper />);
+    });
+
+    act(() => {
+      showMenu(true);
+    });
+
+    // The context menu should be rendered inside the portal root.
+    expect(portalRoot.textContent).toContain('Test Item');
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js

@@ -74,7 +74,13 @@ export default function ContextMenu({
   );
 
   useLayoutEffect(() => {
-    const menu = ((ref.current: any): HTMLElement);
+    const menu = ref.current;
+
+    // The portal may not be rendered if items is empty or the portal
+    // container is missing, in which case the ref will be null.
+    if (menu == null) {
+      return;
+    }
 
     function hideUnlessContains(event: Event) {
       if (!menu.contains(((event.target: any): Node))) {