From 14eb45d78b01829b5db64b0e71b95d29370724c7 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Fri, 19 Jun 2026 18:57:20 +0530
Subject: [PATCH] fix(combobox): resolve portal root from ThemeContext

Use ThemeContext portalRootRef and containerRef instead of
querySelector for theme-scoped portaling.

Fixes #1100
---
 .../fragments/ComboboxPrimitivePortal.tsx     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx b/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx
index d0357e9f1..5d68c4c10 100644
--- a/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx
+++ b/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx
@@ -1,6 +1,7 @@
 'use client';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import Floater from '~/core/primitives/Floater';
+import ThemeContext from '~/components/ui/Theme/ThemeContext';
 import { ComboboxPrimitiveContext } from '../contexts/ComboboxPrimitiveContext';
 
 const ComboboxPrimitivePortal = React.forwardRef<
@@ -8,19 +9,22 @@ const ComboboxPrimitivePortal = React.forwardRef<
     { children: React.ReactNode; container?: HTMLElement | null } & React.ComponentPropsWithoutRef<typeof Floater.Portal>
 >(({ children, container, ...props }, _forwardedRef) => {
     const { isOpen } = useContext(ComboboxPrimitiveContext);
-    const [rootElementFound, setRootElementFound] = useState(false);
-    const rootElement = (container || document.querySelector('#rad-ui-theme-container') || document.body) as HTMLElement | null;
+    const themeContext = useContext(ThemeContext);
+    const rootElementRef = useRef<HTMLElement | null>(null);
+    const [isMounted, setIsMounted] = useState(false);
 
     useEffect(() => {
-        if (rootElement) {
-            setRootElementFound(true);
-        }
-    }, [rootElement]);
+        rootElementRef.current = container
+            ?? themeContext?.portalRootRef.current
+            ?? themeContext?.containerRef.current
+            ?? document.body;
+        setIsMounted(true);
+    }, [container, themeContext]);
 
-    if (!isOpen || !rootElementFound) return null;
+    if (!isOpen || !isMounted) return null;
 
     return (
-        <Floater.Portal root={rootElement} {...props}>
+        <Floater.Portal root={rootElementRef.current} {...props}>
             {children}
         </Floater.Portal>
     );