diff --git a/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx b/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx index d0357e9f1..5d29e63d8 100644 --- a/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx +++ b/src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx @@ -2,14 +2,21 @@ import React, { useContext, useEffect, useState } from 'react'; import Floater from '~/core/primitives/Floater'; import { ComboboxPrimitiveContext } from '../contexts/ComboboxPrimitiveContext'; +import ThemeContext from '~/components/ui/Theme/ThemeContext'; const ComboboxPrimitivePortal = React.forwardRef< React.ElementRef, { children: React.ReactNode; container?: HTMLElement | null } & React.ComponentPropsWithoutRef >(({ children, container, ...props }, _forwardedRef) => { const { isOpen } = useContext(ComboboxPrimitiveContext); + const themeContext = useContext(ThemeContext); const [rootElementFound, setRootElementFound] = useState(false); - const rootElement = (container || document.querySelector('#rad-ui-theme-container') || document.body) as HTMLElement | null; + const rootElement = ( + container + ?? themeContext?.portalRootRef.current + ?? themeContext?.containerRef.current + ?? document.body + ) as HTMLElement | null; useEffect(() => { if (rootElement) { diff --git a/src/core/primitives/Combobox/tests/ComboboxPrimitive.portal.test.tsx b/src/core/primitives/Combobox/tests/ComboboxPrimitive.portal.test.tsx new file mode 100644 index 000000000..e3eab16a7 --- /dev/null +++ b/src/core/primitives/Combobox/tests/ComboboxPrimitive.portal.test.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Theme from '~/components/ui/Theme/Theme'; +import Combobox from '~/components/ui/Combobox/Combobox'; + +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('Combobox primitive portal', () => { + beforeEach(() => mockMatchMedia()); + + test('portals listbox into Theme portal root', async() => { + const user = userEvent.setup(); + + render( + + + Choose + + + + Apple + + + + + + ); + + const portalRoot = document.querySelector('[data-rad-ui-portal-root]') as HTMLElement; + expect(portalRoot).toBeTruthy(); + + await user.click(screen.getByText('Choose')); + await waitFor(() => { + expect(portalRoot).toContainElement(screen.getByText('Apple')); + }); + }); +});