From 77f7c1ee06c1f92c0d52ef3d7802481c43248606 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Wed, 24 Jun 2026 08:45:28 +0530
Subject: [PATCH] fix(Select): complete Theme portal fallback chain (#1100)

---
 .../ui/Select/fragments/SelectPortal.tsx      |  5 ++-
 .../ui/Select/tests/Select.portal.test.tsx    | 44 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/Select/tests/Select.portal.test.tsx

diff --git a/src/components/ui/Select/fragments/SelectPortal.tsx b/src/components/ui/Select/fragments/SelectPortal.tsx
index 3a4ee2ede..8ea97cb2b 100644
--- a/src/components/ui/Select/fragments/SelectPortal.tsx
+++ b/src/components/ui/Select/fragments/SelectPortal.tsx
@@ -13,7 +13,10 @@ type SelectPortalPrimitiveProps = React.ComponentPropsWithoutRef<typeof Combobox
 
 const SelectPortal = React.forwardRef<SelectPortalElement, SelectPortalPrimitiveProps>(({ children, container, ...props }, forwardedRef) => {
     const themeContext = useContext(ThemeContext);
-    const portalContainer = container ?? themeContext?.portalRootRef.current;
+    const portalContainer = container
+        ?? themeContext?.portalRootRef.current
+        ?? themeContext?.containerRef.current
+        ?? undefined;
 
     return (
         <ComboboxPrimitive.Portal ref={forwardedRef} container={portalContainer} {...props}>
diff --git a/src/components/ui/Select/tests/Select.portal.test.tsx b/src/components/ui/Select/tests/Select.portal.test.tsx
new file mode 100644
index 000000000..516bce07a
--- /dev/null
+++ b/src/components/ui/Select/tests/Select.portal.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Select from '../Select';
+import Theme from '~/components/ui/Theme/Theme';
+
+const mockMatchMedia = () => {
+    if ('matchMedia' in window && typeof window.matchMedia === 'function') return;
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(() => ({
+            matches: false,
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn()
+        }))
+    });
+};
+
+describe('Select portal', () => {
+    beforeEach(() => mockMatchMedia());
+
+    test('portals listbox into Theme portal root', async() => {
+        const user = userEvent.setup();
+
+        render(
+            <Theme>
+                <Select.Root>
+                    <Select.Trigger />
+                    <Select.Portal>
+                        <Select.Content>
+                            <Select.Item value="apple">Apple</Select.Item>
+                        </Select.Content>
+                    </Select.Portal>
+                </Select.Root>
+            </Theme>
+        );
+
+        const portalRoot = document.querySelector('[data-rad-ui-portal-root]') as HTMLElement;
+        expect(portalRoot).toBeTruthy();
+
+        await user.click(screen.getByRole('combobox'));
+        expect(portalRoot).toContainElement(screen.getByText('Apple'));
+    });
+});