fix(cdk/overlay): guard against null document.body before popover support check (angular#33403)

arturovt · web-flow · commit 67a5031db78e · 2026-07-08T14:37:28.000+02:00
The WHATWG spec allows document.body to be null when the document element is not <html> or has no <body>/<frameset> child, which can happen during page navigation or unload cycles. Using the 'in' operator against null throws "Cannot use 'in' operator to search for 'showPopover' in null". TypeScript types document.body as non-nullable HTMLElement so the issue is invisible at compile time but surfaces at runtime in edge cases. Creating a minimal reproduction is impractical, as the issue occurs during edge cases in page navigation/unload cycles in a large application. Added a null check before the 'in' expression so that when document.body is unavailable, usePopover falls back to false — the same result as when the browser doesn't support the Popover API at all. Spec: https://html.spec.whatwg.org/multipage/dom.html#dom-document-body Related: microsoft/TypeScript#50078
diff --git a/src/cdk/overlay/overlay.ts b/src/cdk/overlay/overlay.ts
@@ -69,7 +69,10 @@ export function createOverlayRef(injector: Injector, config?: OverlayConfig): Ov
 
   overlayConfig.direction = overlayConfig.direction || directionality.value;
 
-  if (!('showPopover' in doc.body)) {
+  // `document.body` can be null during page navigation or unload cycles per the WHATWG spec
+  // (https://html.spec.whatwg.org/multipage/dom.html#dom-document-body), even though TypeScript
+  // types it as non-nullable. Guard against it to avoid "Cannot use 'in' operator ... in null".
+  if (!doc.body || !('showPopover' in doc.body)) {
     overlayConfig.usePopover = false;
   } else {
     overlayConfig.usePopover = config?.usePopover ?? defaultUsePopover;
