From 2930b46ada5f89b172a087995ec064ecb009b404 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 16 Feb 2026 11:59:56 +0100
Subject: [PATCH] Popover document undefined error fix + zIndex

Added failsafe for document being undefined in Popover component,
and added correct zIndex value to the correcto element.
---
 packages/lib/src/popover/Popover.tsx | 91 +++++++++++++++-------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/packages/lib/src/popover/Popover.tsx b/packages/lib/src/popover/Popover.tsx
index b6435244c..a2eb4cd63 100644
--- a/packages/lib/src/popover/Popover.tsx
+++ b/packages/lib/src/popover/Popover.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import * as Popover from "@radix-ui/react-popover";
 import { PopoverPropsType } from "./types";
 
@@ -42,22 +42,50 @@ const DxcPopover = ({
   const isControlled = useRef(isOpen !== undefined);
 
   const [opened, setOpened] = useState(false);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setPortalContainer(document?.getElementById(`${popOverId}-portal`));
+  }, []);
 
   return (
     <>
-      <Popover.Root open={isControlled.current ? isOpen : opened}>
-        <Popover.Trigger aria-controls={undefined} asChild>
-          {asChild ? (
-            children
-          ) : (
-            <div
-              role="button"
-              style={{ width: "fit-content" }}
-              onClick={
-                actionToOpen === "click"
-                  ? () => handleTrigger(isControlled.current, setOpened, true, onOpen)
-                  : undefined
-              }
+      {portalContainer && (
+        <Popover.Root open={isControlled.current ? isOpen : opened}>
+          <Popover.Trigger aria-controls={undefined} asChild>
+            {asChild ? (
+              children
+            ) : (
+              <div
+                role="button"
+                style={{ width: "fit-content" }}
+                onClick={
+                  actionToOpen === "click"
+                    ? () => handleTrigger(isControlled.current, setOpened, true, onOpen)
+                    : undefined
+                }
+                onMouseEnter={
+                  actionToOpen === "hover"
+                    ? () => handleTrigger(isControlled.current, setOpened, true, onOpen)
+                    : undefined
+                }
+                onMouseLeave={
+                  actionToOpen === "hover"
+                    ? () => handleTrigger(isControlled.current, setOpened, false, onClose)
+                    : undefined
+                }
+              >
+                {children}
+              </div>
+            )}
+          </Popover.Trigger>
+          <Popover.Portal container={portalContainer}>
+            <Popover.Content
+              aria-label="Popover content"
+              align={align}
+              side={side}
+              sideOffset={4}
+              onInteractOutside={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
+              onEscapeKeyDown={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
               onMouseEnter={
                 actionToOpen === "hover"
                   ? () => handleTrigger(isControlled.current, setOpened, true, onOpen)
@@ -69,34 +97,13 @@ const DxcPopover = ({
                   : undefined
               }
             >
-              {children}
-            </div>
-          )}
-        </Popover.Trigger>
-        <Popover.Portal container={document.getElementById(`${popOverId}-portal`)}>
-          <Popover.Content
-            aria-label="Popover content"
-            align={align}
-            side={side}
-            sideOffset={4}
-            style={{ zIndex: "var(--z-contextualMenu)" }}
-            onInteractOutside={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
-            onEscapeKeyDown={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
-            onMouseEnter={
-              actionToOpen === "hover" ? () => handleTrigger(isControlled.current, setOpened, true, onOpen) : undefined
-            }
-            onMouseLeave={
-              actionToOpen === "hover"
-                ? () => handleTrigger(isControlled.current, setOpened, false, onClose)
-                : undefined
-            }
-          >
-            <PopoverContent id={popOverId}>{popoverContent}</PopoverContent>
-            {hasTip && <Popover.Arrow style={{ fill: "var(--color-bg-neutral-lightest)" }} />}
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-      <div id={`${popOverId}-portal`} />
+              <PopoverContent id={popOverId}>{popoverContent}</PopoverContent>
+              {hasTip && <Popover.Arrow style={{ fill: "var(--color-bg-neutral-lightest)" }} />}
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+      )}
+      <div id={`${popOverId}-portal`} style={{ zIndex: "var(--z-contextualmenu)" }} />
     </>
   );
 };