Ensure custom portal fallback IDs are unique

Author: jescalan

packages/react/src/utils/__tests__/useCustomMenuItems.test.tsx

@@ -136,6 +136,29 @@ describe('useUserButtonCustomMenuItems', () => {
     }
   });
 
+  it('uses separate portals for duplicate non-keyed menu items', () => {
+    const children = (
+      <MenuItems>
+        <MenuAction
+          label='Duplicate'
+          labelIcon={<div>First icon</div>}
+          open='/duplicate'
+        />
+        <MenuAction
+          label='Duplicate'
+          labelIcon={<div>Second icon</div>}
+          open='/duplicate'
+        />
+      </MenuItems>
+    );
+
+    const { result } = renderHook(() => useUserButtonCustomMenuItems(children));
+
+    expect(result.current.customMenuItems).toHaveLength(2);
+    expect(result.current.customMenuItemsPortals).toHaveLength(2);
+    expect(result.current.customMenuItemsPortals[0]).not.toBe(result.current.customMenuItemsPortals[1]);
+  });
+
   it('keeps portal identity with the logical menu item when inserting before it', () => {
     const firstItem = (
       <MenuAction

packages/react/src/utils/__tests__/useCustomPages.test.tsx

@@ -10,6 +10,36 @@ vi.mock('@clerk/shared', () => ({
 }));
 
 describe('useOrganizationProfileCustomPages', () => {
+  it('uses separate portals for duplicate non-keyed custom pages', () => {
+    const children = [
+      React.createElement(
+        OrganizationProfilePage,
+        {
+          label: 'Duplicate',
+          labelIcon: <div>First icon</div>,
+          url: 'duplicate',
+        },
+        <div>First content</div>,
+      ),
+      React.createElement(
+        OrganizationProfilePage,
+        {
+          label: 'Duplicate',
+          labelIcon: <div>Second icon</div>,
+          url: 'duplicate',
+        },
+        <div>Second content</div>,
+      ),
+    ];
+
+    const { result } = renderHook(() => useOrganizationProfileCustomPages(children));
+
+    expect(result.current.customPages).toHaveLength(2);
+    expect(result.current.customPagesPortals).toHaveLength(4);
+    expect(result.current.customPagesPortals[0]).not.toBe(result.current.customPagesPortals[2]);
+    expect(result.current.customPagesPortals[1]).not.toBe(result.current.customPagesPortals[3]);
+  });
+
   it('keeps portal identity with the logical custom page when inserting before it', () => {
     const firstPage = (
       <OrganizationProfilePage

packages/react/src/utils/useCustomMenuItems.tsx

@@ -58,6 +58,7 @@ const useCustomMenuItems = ({
   const validChildren: CustomMenuItemType[] = [];
   const customMenuItems: CustomMenuItem[] = [];
   const customMenuItemsPortals: React.ComponentType[] = [];
+  const portalIdCounts = new Map<string, number>();
 
   React.Children.forEach(children, child => {
     if (
@@ -107,13 +108,13 @@ const useCustomMenuItems = ({
             validChildren.push({
               ...baseItem,
               onClick,
-              portalId: getCustomMenuItemPortalId('action', props, childKey),
+              portalId: getCustomMenuItemPortalId('action', props, childKey, portalIdCounts),
             });
           } else if (open !== undefined) {
             validChildren.push({
               ...baseItem,
               open: open.startsWith('/') ? open : `/${open}`,
-              portalId: getCustomMenuItemPortalId('action', props, childKey),
+              portalId: getCustomMenuItemPortalId('action', props, childKey, portalIdCounts),
             });
           } else {
             // Handle the case where neither onClick nor open is defined
@@ -128,7 +129,12 @@ const useCustomMenuItems = ({
 
       if (isThatComponent(child, MenuLinkComponent)) {
         if (isExternalLink(props)) {
-          validChildren.push({ label, labelIcon, href, portalId: getCustomMenuItemPortalId('link', props, childKey) });
+          validChildren.push({
+            label,
+            labelIcon,
+            href,
+            portalId: getCustomMenuItemPortalId('link', props, childKey, portalIdCounts),
+          });
         } else {
           logErrorInDevMode(userButtonMenuItemLinkWrongProps);
           return;
@@ -200,13 +206,17 @@ const getCustomMenuItemPortalId = (
   type: 'action' | 'link',
   props: Pick<CustomMenuItemType, 'label'> & { href?: string; open?: string },
   key: React.Key | null,
+  portalIdCounts: Map<string, number>,
 ) => {
   if (key != null) {
     return `${type}:key:${key}`;
   }
 
   const target = props.href || props.open || '';
-  return `${type}:${props.label}:${target}`;
+  const baseId = `${type}:${props.label}:${target}`;
+  const occurrence = portalIdCounts.get(baseId) ?? 0;
+  portalIdCounts.set(baseId, occurrence + 1);
+  return `${baseId}:${occurrence}`;
 };
 
 const isReorderItem = (childProps: any, validItems: string[]): boolean => {

packages/react/src/utils/useCustomPages.tsx

@@ -104,6 +104,7 @@ const useCustomPages = (params: UseCustomPagesParams, options?: UseCustomPagesOp
   const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;
   const { allowForAnyChildren = false } = options || {};
   const validChildren: CustomPageWithIdType[] = [];
+  const portalIdCounts = new Map<string, number>();
 
   React.Children.forEach(children, child => {
     if (
@@ -134,7 +135,7 @@ const useCustomPages = (params: UseCustomPagesParams, options?: UseCustomPagesOp
           labelIcon,
           children,
           url,
-          portalId: getCustomPagePortalId('page', props, childKey),
+          portalId: getCustomPagePortalId('page', props, childKey, portalIdCounts),
         });
       } else {
         logErrorInDevMode(customPageWrongProps(componentName));
@@ -145,7 +146,12 @@ const useCustomPages = (params: UseCustomPagesParams, options?: UseCustomPagesOp
     if (isThatComponent(child, LinkComponent)) {
       if (isExternalLink(props)) {
         // This is an external link
-        validChildren.push({ label, labelIcon, url, portalId: getCustomPagePortalId('link', props, childKey) });
+        validChildren.push({
+          label,
+          labelIcon,
+          url,
+          portalId: getCustomPagePortalId('link', props, childKey, portalIdCounts),
+        });
       } else {
         logErrorInDevMode(customLinkWrongProps(componentName));
         return;
@@ -215,8 +221,16 @@ const getCustomPagePortalId = (
   type: 'page' | 'link',
   props: Pick<CustomPageWithIdType, 'label' | 'url'>,
   key: React.Key | null,
+  portalIdCounts: Map<string, number>,
 ) => {
-  return key == null ? `${type}:${props.label}:${props.url}` : `${type}:key:${key}`;
+  if (key != null) {
+    return `${type}:key:${key}`;
+  }
+
+  const baseId = `${type}:${props.label}:${props.url}`;
+  const occurrence = portalIdCounts.get(baseId) ?? 0;
+  portalIdCounts.set(baseId, occurrence + 1);
+  return `${baseId}:${occurrence}`;
 };
 
 const isReorderItem = (childProps: any, validItems: string[]): boolean => {