From 71ff27a06d5d88f3e1423d08b95dc9551b594f92 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 25 Nov 2025 11:48:16 -0500
Subject: [PATCH 1/5] init

---
 packages/clerk-js/src/ui/elements/Modal.tsx   |  7 +-
 packages/clerk-js/src/ui/elements/Popover.tsx |  6 +-
 .../src/client-boundary/controlComponents.ts  |  1 +
 packages/nextjs/src/index.ts                  |  1 +
 packages/react/src/contexts/index.ts          |  1 +
 packages/shared/src/react/PortalProvider.tsx  | 76 +++++++++++++++++++
 packages/shared/src/react/index.ts            |  2 +
 .../shared/src/react/portal-root-manager.ts   | 37 +++++++++
 8 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 packages/shared/src/react/PortalProvider.tsx
 create mode 100644 packages/shared/src/react/portal-root-manager.ts

diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx
index 46934f2a5d8..dc7d0ef0521 100644
--- a/packages/clerk-js/src/ui/elements/Modal.tsx
+++ b/packages/clerk-js/src/ui/elements/Modal.tsx
@@ -1,4 +1,4 @@
-import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react';
+import { createContextAndHook, useSafeLayoutEffect, usePortalRoot } from '@clerk/shared/react';
 import React, { useRef } from 'react';
 
 import { descriptors, Flex } from '../customizables';
@@ -27,6 +27,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
   const { disableScrollLock, enableScrollLock } = useScrollLock();
   const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =
     props;
+  const portalRootFromContext = usePortalRoot();
   const overlayRef = useRef<HTMLDivElement>(null);
   const { floating, isOpen, context, nodeId, toggle } = usePopover({
     defaultOpen: true,
@@ -52,13 +53,15 @@ export const Modal = withFloatingTree((props: ModalProps) => {
     };
   }, []);
 
+  const effectivePortalRoot = portalRoot ?? portalRootFromContext ?? undefined;
+
   return (
     <Popover
       nodeId={nodeId}
       context={context}
       isOpen={isOpen}
       outsideElementsInert
-      root={portalRoot}
+      root={effectivePortalRoot}
       initialFocus={initialFocusRef}
     >
       <ModalContext.Provider value={modalCtx}>
diff --git a/packages/clerk-js/src/ui/elements/Popover.tsx b/packages/clerk-js/src/ui/elements/Popover.tsx
index 826adc7860f..1c8233b5e94 100644
--- a/packages/clerk-js/src/ui/elements/Popover.tsx
+++ b/packages/clerk-js/src/ui/elements/Popover.tsx
@@ -1,5 +1,6 @@
 import type { FloatingContext, ReferenceType } from '@floating-ui/react';
 import { FloatingFocusManager, FloatingNode, FloatingPortal } from '@floating-ui/react';
+import { usePortalRoot } from '@clerk/shared/react';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
@@ -35,10 +36,13 @@ export const Popover = (props: PopoverProps) => {
     children,
   } = props;
 
+  const portalRoot = usePortalRoot();
+  const effectiveRoot = root ?? portalRoot ?? undefined;
+
   if (portal) {
     return (
       <FloatingNode id={nodeId}>
-        <FloatingPortal root={root}>
+        <FloatingPortal root={effectiveRoot}>
           {isOpen && (
             <FloatingFocusManager
               context={context}
diff --git a/packages/nextjs/src/client-boundary/controlComponents.ts b/packages/nextjs/src/client-boundary/controlComponents.ts
index 5398de807fc..34fc73c5360 100644
--- a/packages/nextjs/src/client-boundary/controlComponents.ts
+++ b/packages/nextjs/src/client-boundary/controlComponents.ts
@@ -15,6 +15,7 @@ export {
   AuthenticateWithRedirectCallback,
   RedirectToCreateOrganization,
   RedirectToOrganizationProfile,
+  PortalProvider,
 } from '@clerk/clerk-react';
 
 export { MultisessionAppSupport } from '@clerk/clerk-react/internal';
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index 2e29bcd7568..43f78a6e9c9 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -8,6 +8,7 @@ export {
   ClerkFailed,
   ClerkLoaded,
   ClerkLoading,
+  PortalProvider,
   RedirectToCreateOrganization,
   RedirectToOrganizationProfile,
   RedirectToSignIn,
diff --git a/packages/react/src/contexts/index.ts b/packages/react/src/contexts/index.ts
index aebcfc5ad9b..8f653d20c3e 100644
--- a/packages/react/src/contexts/index.ts
+++ b/packages/react/src/contexts/index.ts
@@ -1 +1,2 @@
 export { ClerkProvider } from './ClerkProvider';
+export { PortalProvider } from '@clerk/shared/react';
diff --git a/packages/shared/src/react/PortalProvider.tsx b/packages/shared/src/react/PortalProvider.tsx
new file mode 100644
index 00000000000..f88fe5d2ee9
--- /dev/null
+++ b/packages/shared/src/react/PortalProvider.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+
+import { createContextAndHook } from './hooks/createContextAndHook';
+import { portalRootManager } from './portal-root-manager';
+
+type PortalProviderProps = React.PropsWithChildren<{
+  /**
+   * Function that returns the container element where portals should be rendered.
+   * This allows Clerk components to render inside external dialogs/popovers
+   * (e.g., Radix Dialog, React Aria Components) instead of document.body.
+   */
+  getContainer: () => HTMLElement | null;
+}>;
+
+const [PortalContext, , usePortalContextWithoutGuarantee] = createContextAndHook<{
+  getContainer: () => HTMLElement | null;
+}>('PortalProvider');
+
+/**
+ * PortalProvider allows you to specify a custom container for all Clerk floating UI elements
+ * (popovers, modals, tooltips, etc.) that use portals.
+ *
+ * This is particularly useful when using Clerk components inside external UI libraries
+ * like Radix Dialog or React Aria Components, where portaled elements need to render
+ * within the dialog's container to remain interactable.
+ *
+ * @example
+ * ```tsx
+ * function Example() {
+ *   const containerRef = useRef(null);
+ *   return (
+ *     <RadixDialog ref={containerRef}>
+ *       <PortalProvider getContainer={() => containerRef.current}>
+ *         <UserButton />
+ *       </PortalProvider>
+ *     </RadixDialog>
+ *   );
+ * }
+ * ```
+ */
+export const PortalProvider = ({ children, getContainer }: PortalProviderProps) => {
+  const getContainerRef = useRef(getContainer);
+  getContainerRef.current = getContainer;
+
+  // Register with the manager for cross-tree access (e.g., modals in Components.tsx)
+  useEffect(() => {
+    const getContainerWrapper = () => getContainerRef.current();
+    portalRootManager.push(getContainerWrapper);
+    return () => {
+      portalRootManager.pop();
+    };
+  }, []);
+
+  // Provide context for same-tree access (e.g., UserButton popover)
+  const contextValue = React.useMemo(() => ({ value: { getContainer } }), [getContainer]);
+
+  return <PortalContext.Provider value={contextValue}>{children}</PortalContext.Provider>;
+};
+
+/**
+ * Hook to get the current portal root container.
+ * First checks React context (for same-tree components),
+ * then falls back to PortalRootManager (for cross-tree like modals).
+ */
+export const usePortalRoot = (): HTMLElement | null => {
+  // Try to get from context first (for components in the same React tree)
+  const contextValue = usePortalContextWithoutGuarantee();
+  if (contextValue && 'getContainer' in contextValue) {
+    return contextValue.getContainer();
+  }
+
+  // Fall back to manager (for components in different React trees, like modals)
+  return portalRootManager.getCurrent();
+};
diff --git a/packages/shared/src/react/index.ts b/packages/shared/src/react/index.ts
index b05c94db6bd..cdf195d9fe8 100644
--- a/packages/shared/src/react/index.ts
+++ b/packages/shared/src/react/index.ts
@@ -20,3 +20,5 @@ export {
 } from './contexts';
 
 export * from './billing/payment-element';
+
+export { PortalProvider, usePortalRoot } from './PortalProvider';
diff --git a/packages/shared/src/react/portal-root-manager.ts b/packages/shared/src/react/portal-root-manager.ts
new file mode 100644
index 00000000000..eb371adfc18
--- /dev/null
+++ b/packages/shared/src/react/portal-root-manager.ts
@@ -0,0 +1,37 @@
+/**
+ * PortalRootManager manages a stack of portal root containers.
+ * This allows PortalProvider to work across separate React trees
+ * (e.g., when Clerk modals are rendered in a different tree via Components.tsx).
+ */
+class PortalRootManager {
+  private stack: Array<() => HTMLElement | null> = [];
+
+  /**
+   * Push a new portal root getter onto the stack.
+   * @param getContainer Function that returns the container element
+   */
+  push(getContainer: () => HTMLElement | null): void {
+    this.stack.push(getContainer);
+  }
+
+  /**
+   * Pop the most recent portal root from the stack.
+   */
+  pop(): void {
+    this.stack.pop();
+  }
+
+  /**
+   * Get the current (topmost) portal root container.
+   * @returns The container element or null if no provider is active
+   */
+  getCurrent(): HTMLElement | null {
+    if (this.stack.length === 0) {
+      return null;
+    }
+    const getContainer = this.stack[this.stack.length - 1];
+    return getContainer();
+  }
+}
+
+export const portalRootManager = new PortalRootManager();

From 922010b46cc99ee499f96942e939cc5e804dec82 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 25 Nov 2025 11:58:37 -0500
Subject: [PATCH 2/5] Create wet-phones-camp.md

---
 .changeset/wet-phones-camp.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .changeset/wet-phones-camp.md

diff --git a/.changeset/wet-phones-camp.md b/.changeset/wet-phones-camp.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/wet-phones-camp.md
@@ -0,0 +1,2 @@
+---
+---

From 3d5f3bdb0fe6c295ee205bbe529092f4a7bd3dd4 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 25 Nov 2025 12:58:38 -0500
Subject: [PATCH 3/5] Apply suggestion from @alexcarpenter

---
 .changeset/wet-phones-camp.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/wet-phones-camp.md b/.changeset/wet-phones-camp.md
index a845151cc84..a8fc88272a7 100644
--- a/.changeset/wet-phones-camp.md
+++ b/.changeset/wet-phones-camp.md
@@ -1,2 +1,3 @@
 ---
+'@clerk/shared': patch
 ---

From e9b66d5fa818fd8fcbeb53ef2ae89bf5838d8295 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 25 Nov 2025 13:40:42 -0500
Subject: [PATCH 4/5] wip

---
 .../clerk-js/src/ui/lazyModules/providers.tsx | 23 +++++++++++--------
 packages/react/src/components/withClerk.tsx   |  3 +++
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/clerk-js/src/ui/lazyModules/providers.tsx b/packages/clerk-js/src/ui/lazyModules/providers.tsx
index 827d869a650..6922f3f8f99 100644
--- a/packages/clerk-js/src/ui/lazyModules/providers.tsx
+++ b/packages/clerk-js/src/ui/lazyModules/providers.tsx
@@ -1,4 +1,5 @@
 import { deprecated } from '@clerk/shared/deprecated';
+import { PortalProvider } from '@clerk/shared/react';
 import type { Appearance } from '@clerk/shared/types';
 import React, { lazy, Suspense } from 'react';
 
@@ -75,16 +76,18 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
       appearanceKey={props.appearanceKey}
       appearance={props.componentAppearance}
     >
-      <Portal
-        node={props.node}
-        component={
-          ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
-            Omit<AvailableComponentCtx, 'componentName'>
-          >
-        }
-        props={props.componentProps}
-        componentName={props.componentName}
-      />
+      <PortalProvider getContainer={() => props?.componentProps?.portalRoot}>
+        <Portal
+          node={props.node}
+          component={
+            ClerkComponents[props.componentName as ClerkComponentName] as React.ComponentType<
+              Omit<AvailableComponentCtx, 'componentName'>
+            >
+          }
+          props={props.componentProps}
+          componentName={props.componentName}
+        />
+      </PortalProvider>
     </AppearanceProvider>
   );
 };
diff --git a/packages/react/src/components/withClerk.tsx b/packages/react/src/components/withClerk.tsx
index 70ace96b3af..1e4c1529f2c 100644
--- a/packages/react/src/components/withClerk.tsx
+++ b/packages/react/src/components/withClerk.tsx
@@ -1,3 +1,4 @@
+import { usePortalRoot } from '@clerk/shared/react';
 import type { LoadedClerk, Without } from '@clerk/shared/types';
 import React from 'react';
 
@@ -19,6 +20,7 @@ export const withClerk = <P extends { clerk: LoadedClerk; component?: string }>(
     useAssertWrappedByClerkProvider(displayName || 'withClerk');
 
     const clerk = useIsomorphicClerkContext();
+    const portalRoot = usePortalRoot();
 
     if (!clerk.loaded && !options?.renderWhileLoading) {
       return null;
@@ -26,6 +28,7 @@ export const withClerk = <P extends { clerk: LoadedClerk; component?: string }>(
 
     return (
       <Component
+        portalRoot={portalRoot}
         {...(props as P)}
         component={displayName}
         clerk={clerk}

From 2423766288deef0d876500dbd539301729cb0a10 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Mon, 1 Dec 2025 13:02:22 -0500
Subject: [PATCH 5/5] wip

---
 packages/clerk-js/src/ui/Components.tsx       |  1 +
 .../UserButton/useMultisessionActions.tsx     |  6 ++-
 packages/clerk-js/src/ui/elements/Modal.tsx   |  4 +-
 packages/clerk-js/src/ui/elements/Popover.tsx |  8 +++-
 .../clerk-js/src/ui/lazyModules/providers.tsx | 47 ++++++++++---------
 packages/react/src/components/withClerk.tsx   |  4 +-
 packages/shared/src/react/PortalProvider.tsx  |  9 ++--
 7 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 6f3be02ea95..c014547fe25 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -484,6 +484,7 @@ const Components = (props: ComponentsProps) => {
         base: '/user',
         path: userProfileModal?.__experimental_startPath || urlStateParam?.path,
       })}
+      getContainer={userProfileModal?.getContainer}
       componentName={'UserProfileModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}
diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
index cb6e110363c..434576df47b 100644
--- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { useClerk, usePortalRoot } from '@clerk/shared/react';
 import type { SignedInSessionResource, UserButtonProps, UserResource } from '@clerk/shared/types';
 
 import { navigateIfTaskExists } from '@/core/sessionTasks';
@@ -27,6 +27,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
   const { signedInSessions, otherSessions } = useMultipleSessions({ user: opts.user });
   const { navigate } = useRouter();
   const { displayConfig } = useEnvironment();
+  const getContainer = usePortalRoot();
 
   const handleSignOutSessionClicked = (session: SignedInSessionResource) => () => {
     if (otherSessions.length === 0) {
@@ -46,7 +47,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
         })();
       });
     }
-    openUserProfile(opts.userProfileProps);
+    openUserProfile({ getContainer, ...opts.userProfileProps });
     return opts.actionCompleteCallback?.();
   };
 
@@ -60,6 +61,7 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
       });
     }
     openUserProfile({
+      getContainer,
       ...opts.userProfileProps,
       ...(__experimental_startPath && { __experimental_startPath }),
     });
diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx
index dc7d0ef0521..588db619795 100644
--- a/packages/clerk-js/src/ui/elements/Modal.tsx
+++ b/packages/clerk-js/src/ui/elements/Modal.tsx
@@ -1,4 +1,4 @@
-import { createContextAndHook, useSafeLayoutEffect, usePortalRoot } from '@clerk/shared/react';
+import { createContextAndHook, usePortalRoot, useSafeLayoutEffect } from '@clerk/shared/react';
 import React, { useRef } from 'react';
 
 import { descriptors, Flex } from '../customizables';
@@ -53,7 +53,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
     };
   }, []);
 
-  const effectivePortalRoot = portalRoot ?? portalRootFromContext ?? undefined;
+  const effectivePortalRoot = portalRoot ?? portalRootFromContext?.() ?? undefined;
 
   return (
     <Popover
diff --git a/packages/clerk-js/src/ui/elements/Popover.tsx b/packages/clerk-js/src/ui/elements/Popover.tsx
index 1c8233b5e94..52fc4656027 100644
--- a/packages/clerk-js/src/ui/elements/Popover.tsx
+++ b/packages/clerk-js/src/ui/elements/Popover.tsx
@@ -1,6 +1,6 @@
+import { usePortalRoot } from '@clerk/shared/react';
 import type { FloatingContext, ReferenceType } from '@floating-ui/react';
 import { FloatingFocusManager, FloatingNode, FloatingPortal } from '@floating-ui/react';
-import { usePortalRoot } from '@clerk/shared/react';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
@@ -37,7 +37,11 @@ export const Popover = (props: PopoverProps) => {
   } = props;
 
   const portalRoot = usePortalRoot();
-  const effectiveRoot = root ?? portalRoot ?? undefined;
+  const effectiveRoot = root ?? portalRoot?.() ?? undefined;
+
+  console.log('effectiveRoot', effectiveRoot);
+  console.log('portalRoot', portalRoot);
+  console.log('root', root);
 
   if (portal) {
     return (
diff --git a/packages/clerk-js/src/ui/lazyModules/providers.tsx b/packages/clerk-js/src/ui/lazyModules/providers.tsx
index 6922f3f8f99..deeb9e97d4e 100644
--- a/packages/clerk-js/src/ui/lazyModules/providers.tsx
+++ b/packages/clerk-js/src/ui/lazyModules/providers.tsx
@@ -76,7 +76,7 @@ export const LazyComponentRenderer = (props: LazyComponentRendererProps) => {
       appearanceKey={props.appearanceKey}
       appearance={props.componentAppearance}
     >
-      <PortalProvider getContainer={() => props?.componentProps?.portalRoot}>
+      <PortalProvider getContainer={props?.componentProps?.getContainer}>
         <Portal
           node={props.node}
           component={
@@ -106,6 +106,7 @@ type LazyModalRendererProps = React.PropsWithChildren<
     canCloseModal?: boolean;
     modalId?: string;
     modalStyle?: React.CSSProperties;
+    getContainer: () => HTMLElement | null;
   } & AppearanceProviderProps
 >;
 
@@ -119,27 +120,29 @@ export const LazyModalRenderer = (props: LazyModalRendererProps) => {
       >
         <FlowMetadataProvider flow={props.flowName || ('' as any)}>
           <InternalThemeProvider>
-            <Modal
-              id={props.modalId}
-              style={props.modalStyle}
-              handleClose={props.onClose}
-              containerSx={props.modalContainerSx}
-              contentSx={props.modalContentSx}
-              canCloseModal={props.canCloseModal}
-            >
-              {props.startPath ? (
-                <Suspense>
-                  <VirtualRouter
-                    startPath={props.startPath}
-                    onExternalNavigate={props.onExternalNavigate}
-                  >
-                    {props.children}
-                  </VirtualRouter>
-                </Suspense>
-              ) : (
-                props.children
-              )}
-            </Modal>
+            <PortalProvider getContainer={props.getContainer}>
+              <Modal
+                id={props.modalId}
+                style={props.modalStyle}
+                handleClose={props.onClose}
+                containerSx={props.modalContainerSx}
+                contentSx={props.modalContentSx}
+                canCloseModal={props.canCloseModal}
+              >
+                {props.startPath ? (
+                  <Suspense>
+                    <VirtualRouter
+                      startPath={props.startPath}
+                      onExternalNavigate={props.onExternalNavigate}
+                    >
+                      {props.children}
+                    </VirtualRouter>
+                  </Suspense>
+                ) : (
+                  props.children
+                )}
+              </Modal>
+            </PortalProvider>
           </InternalThemeProvider>
         </FlowMetadataProvider>
       </AppearanceProvider>
diff --git a/packages/react/src/components/withClerk.tsx b/packages/react/src/components/withClerk.tsx
index 1e4c1529f2c..b8eee8d44bc 100644
--- a/packages/react/src/components/withClerk.tsx
+++ b/packages/react/src/components/withClerk.tsx
@@ -20,7 +20,7 @@ export const withClerk = <P extends { clerk: LoadedClerk; component?: string }>(
     useAssertWrappedByClerkProvider(displayName || 'withClerk');
 
     const clerk = useIsomorphicClerkContext();
-    const portalRoot = usePortalRoot();
+    const getContainer = usePortalRoot();
 
     if (!clerk.loaded && !options?.renderWhileLoading) {
       return null;
@@ -28,7 +28,7 @@ export const withClerk = <P extends { clerk: LoadedClerk; component?: string }>(
 
     return (
       <Component
-        portalRoot={portalRoot}
+        getContainer={getContainer}
         {...(props as P)}
         component={displayName}
         clerk={clerk}
diff --git a/packages/shared/src/react/PortalProvider.tsx b/packages/shared/src/react/PortalProvider.tsx
index f88fe5d2ee9..ab7e032e914 100644
--- a/packages/shared/src/react/PortalProvider.tsx
+++ b/packages/shared/src/react/PortalProvider.tsx
@@ -64,13 +64,14 @@ export const PortalProvider = ({ children, getContainer }: PortalProviderProps)
  * First checks React context (for same-tree components),
  * then falls back to PortalRootManager (for cross-tree like modals).
  */
-export const usePortalRoot = (): HTMLElement | null => {
+export const usePortalRoot = (): (() => HTMLElement | null) => {
   // Try to get from context first (for components in the same React tree)
   const contextValue = usePortalContextWithoutGuarantee();
-  if (contextValue && 'getContainer' in contextValue) {
-    return contextValue.getContainer();
+
+  if (contextValue && 'getContainer' in contextValue && contextValue.getContainer) {
+    return contextValue.getContainer;
   }
 
   // Fall back to manager (for components in different React trees, like modals)
-  return portalRootManager.getCurrent();
+  return portalRootManager.getCurrent.bind(portalRootManager);
 };