fix(clerk-js): Force re-mount drawers on session switch

.changeset/puny-dancers-worry.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: Checkout drawer not opening after user selected another account from UserButton.

packages/clerk-js/src/ui/Components.tsx

@@ -26,22 +26,20 @@ import { useClerkModalStateParams } from './hooks/useClerkModalStateParams';
 import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
-  Checkout,
   CreateOrganizationModal,
   ImpersonationFab,
   KeylessPrompt,
   OrganizationProfileModal,
   preloadComponent,
   SignInModal,
   SignUpModal,
-  SubscriptionDetails,
   UserProfileModal,
   UserVerificationModal,
   WaitlistModal,
 } from './lazyModules/components';
+import { MountedCheckoutDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
 import {
   LazyComponentRenderer,
-  LazyDrawerRenderer,
   LazyImpersonationFabProvider,
   LazyModalRenderer,
   LazyOneTapRenderer,
@@ -543,45 +541,6 @@ const Components = (props: ComponentsProps) => {
     </LazyModalRenderer>
   );
 
-  const mountedCheckoutDrawer = checkoutDrawer.props && (
-    <LazyDrawerRenderer
-      globalAppearance={state.appearance}
-      appearanceKey={'checkout' as any}
-      componentAppearance={{}}
-      flowName={'checkout'}
-      open={checkoutDrawer.open}
-      onOpenChange={() => componentsControls.closeDrawer('checkout')}
-      componentName={'Checkout'}
-      portalId={checkoutDrawer.props.portalId}
-    >
-      <Checkout
-        planId={checkoutDrawer.props.planId}
-        planPeriod={checkoutDrawer.props.planPeriod}
-        subscriberType={checkoutDrawer.props.subscriberType}
-        onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
-      />
-    </LazyDrawerRenderer>
-  );
-
-  const mountedSubscriptionDetailDrawer = subscriptionDetailsDrawer.props && (
-    <LazyDrawerRenderer
-      globalAppearance={state.appearance}
-      appearanceKey={'subscriptionDetails' as any}
-      componentAppearance={{}}
-      flowName={'subscriptionDetails'}
-      open={subscriptionDetailsDrawer.open}
-      onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}
-      componentName={'SubscriptionDetails'}
-      portalId={subscriptionDetailsDrawer.props.portalId}
-    >
-      <SubscriptionDetails
-        {...subscriptionDetailsDrawer.props}
-        subscriberType={subscriptionDetailsDrawer.props.subscriberType || 'user'}
-        onSubscriptionCancel={subscriptionDetailsDrawer.props.onSubscriptionCancel || (() => {})}
-      />
-    </LazyDrawerRenderer>
-  );
-
   return (
     <Suspense fallback={''}>
       <LazyProviders
@@ -612,8 +571,19 @@ const Components = (props: ComponentsProps) => {
         {createOrganizationModal && mountedCreateOrganizationModal}
         {waitlistModal && mountedWaitlistModal}
         {blankCaptchaModal && mountedBlankCaptchaModal}
-        {mountedCheckoutDrawer}
-        {mountedSubscriptionDetailDrawer}
+
+        <MountedCheckoutDrawer
+          appearance={state.appearance}
+          checkoutDrawer={checkoutDrawer}
+          onOpenChange={() => componentsControls.closeDrawer('checkout')}
+        />
+
+        <MountedSubscriptionDetailDrawer
+          appearance={state.appearance}
+          subscriptionDetailsDrawer={subscriptionDetailsDrawer}
+          onOpenChange={() => componentsControls.closeDrawer('subscriptionDetails')}
+        />
+
         {state.impersonationFab && (
           <LazyImpersonationFabProvider globalAppearance={state.appearance}>
             <ImpersonationFab />

packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

@@ -0,0 +1,48 @@
+import { useUser } from '@clerk/shared/react';
+import type { __experimental_CheckoutProps, Appearance } from '@clerk/types';
+
+import { Checkout } from './components';
+import { LazyDrawerRenderer } from './providers';
+
+export function MountedCheckoutDrawer({
+  appearance,
+  checkoutDrawer,
+  onOpenChange,
+}: {
+  appearance?: Appearance;
+  onOpenChange: (open: boolean) => void;
+  checkoutDrawer: {
+    open: false;
+    props: null | __experimental_CheckoutProps;
+  };
+}) {
+  const { user } = useUser();
+  if (!checkoutDrawer.props) {
+    return null;
+  }
+
+  return (
+    <LazyDrawerRenderer
+      // We set `key` to be the user id to "reset" floating ui portals on session switch.
+      // Without this, the drawer would not be rendered after a session switch.
+      key={user?.id}
+      globalAppearance={appearance}
+      appearanceKey={'checkout' as any}
+      componentAppearance={{}}
+      flowName={'checkout'}
+      open={checkoutDrawer.open}
+      onOpenChange={onOpenChange}
+      componentName={'Checkout'}
+      portalId={checkoutDrawer.props?.portalId}
+    >
+      {checkoutDrawer.props && (
+        <Checkout
+          planId={checkoutDrawer.props.planId}
+          planPeriod={checkoutDrawer.props.planPeriod}
+          subscriberType={checkoutDrawer.props.subscriberType}
+          onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
+        />
+      )}
+    </LazyDrawerRenderer>
+  );
+}

packages/clerk-js/src/ui/lazyModules/MountedSubscriptionDetailDrawer.tsx

@@ -0,0 +1,45 @@
+import { useUser } from '@clerk/shared/react';
+import type { __experimental_SubscriptionDetailsProps, Appearance } from '@clerk/types';
+
+import { SubscriptionDetails } from './components';
+import { LazyDrawerRenderer } from './providers';
+
+export function MountedSubscriptionDetailDrawer({
+  appearance,
+  subscriptionDetailsDrawer,
+  onOpenChange,
+}: {
+  appearance?: Appearance;
+  onOpenChange: (open: boolean) => void;
+  subscriptionDetailsDrawer: {
+    open: false;
+    props: null | __experimental_SubscriptionDetailsProps;
+  };
+}) {
+  const { user } = useUser();
+  if (!subscriptionDetailsDrawer.props) {
+    return null;
+  }
+
+  return (
+    <LazyDrawerRenderer
+      // We set `key` to be the user id to "reset" floating ui portals on session switch.
+      // Without this, the drawer would not be rendered after a session switch.
+      key={user?.id}
+      globalAppearance={appearance}
+      appearanceKey={'subscriptionDetails' as any}
+      componentAppearance={{}}
+      flowName={'subscriptionDetails'}
+      open={subscriptionDetailsDrawer.open}
+      onOpenChange={onOpenChange}
+      componentName={'SubscriptionDetails'}
+      portalId={subscriptionDetailsDrawer.props.portalId}
+    >
+      <SubscriptionDetails
+        {...subscriptionDetailsDrawer.props}
+        subscriberType={subscriptionDetailsDrawer.props.subscriberType || 'user'}
+        onSubscriptionCancel={subscriptionDetailsDrawer.props.onSubscriptionCancel || (() => {})}
+      />
+    </LazyDrawerRenderer>
+  );
+}

packages/clerk-js/src/ui/lazyModules/drawers.tsx

@@ -0,0 +1,8 @@
+import { lazy } from 'react';
+
+export const MountedCheckoutDrawer = lazy(() =>
+  import('./MountedCheckoutDrawer').then(module => ({ default: module.MountedCheckoutDrawer })),
+);
+export const MountedSubscriptionDetailDrawer = lazy(() =>
+  import('./MountedSubscriptionDetailDrawer').then(module => ({ default: module.MountedSubscriptionDetailDrawer })),
+);