fix(clerk-js): Fix the conditional render condition for organizationP…

…reviewSecondaryIdentifier (#2936)
clerk · Mar 6, 2024 · 097ec48 · 097ec48
1 parent ceb74c4
commit 097ec48
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/four-crabs-sneeze.md b/.changeset/four-crabs-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+The organizationPreviewSecondaryIdentifier element will no longer be rendered empty inside the organization switcher's list.
diff --git a/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx b/packages/clerk-js/src/ui/elements/OrganizationPreview.tsx
@@ -42,6 +42,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
 
   const membership = user?.organizationMemberships.find(membership => membership.organization.id === organization.id);
   const unlocalizedRoleLabel = options?.find(a => a.value === membership?.role)?.label;
+  const roleLabel = localizeCustomRole(membership?.role) || unlocalizedRoleLabel;
 
   const mainTextSize =
     mainIdentifierVariant || ({ xs: 'subtitle', sm: 'caption', md: 'subtitle', lg: 'h1' } as const)[size];
@@ -91,12 +92,13 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
         >
           {organization.name} {badge}
         </Text>
-        {organization.name && (
+
+        {roleLabel && (
           <Text
             elementDescriptor={descriptors.organizationPreviewSecondaryIdentifier}
             elementId={descriptors.organizationPreviewSecondaryIdentifier.setId(elementId)}
-            localizationKey={localizeCustomRole(membership?.role) || unlocalizedRoleLabel}
             as='span'
+            localizationKey={roleLabel}
             truncate
           />
         )}