From 37c8feec4a2738d8da6e692dfb21933366fc55d0 Mon Sep 17 00:00:00 2001 From: fresh3nough Date: Sat, 28 Feb 2026 17:21:07 +0000 Subject: [PATCH] fix(devtools): guard useLayoutEffect against null ref in ContextMenu The useLayoutEffect in ContextMenu accesses ref.current without checking for null. When portalContainer is missing or items is empty, the component returns null (no portal rendered), leaving ref.current as null and causing a crash on the subsequent .contains() call. Guard the effect with the same early-return condition used by the render path (portalContainer == null || items.length === 0) so the effect is a no-op when no portal is mounted. --- .../src/devtools/ContextMenu/ContextMenu.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js index a96634fbe46a..1cafd9ff0314 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js +++ b/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; + + // Match the early-return condition below. If neither of these + // is true, menu being null would be a bug. + if (portalContainer == null || items.length === 0) { + return; + } function hideUnlessContains(event: Event) { if (!menu.contains(((event.target: any): Node))) {