From 5da446d7f7497acfa0c7311a4913d6e01fcdbad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 23 May 2025 14:51:16 +0200
Subject: [PATCH] Display "Untitled" in MultipleRecordPicker (#12246)

Fixes #11940

Display untitled with the object name for untitled records in
`MultipleRecordPicker`:

![CleanShot 2025-05-23 at 11 29
20@2x](https://github.com/user-attachments/assets/062df33c-5c7a-4170-a973-8a1fc1b04729)
---
 .../components/MultipleRecordPickerMenuItemContent.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx
index b99e01728..647485fc3 100644
--- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerMenuItemContent.tsx
@@ -10,6 +10,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { capitalize } from 'twenty-shared/utils';
 import { Avatar } from 'twenty-ui/display';
 import { MenuItemMultiSelectAvatar } from 'twenty-ui/navigation';
 import { SearchRecord } from '~/generated-metadata/graphql';
@@ -58,6 +59,10 @@ export const MultipleRecordPickerMenuItemContent = ({
     });
   };
 
+  const displayText =
+    searchRecord.label?.trim() ||
+    `Untitled ${capitalize(objectMetadataItem.nameSingular)}`;
+
   return (
     <StyledSelectableItem
       itemId={searchRecord.recordId}
@@ -72,12 +77,12 @@ export const MultipleRecordPickerMenuItemContent = ({
           <Avatar
             avatarUrl={searchRecord.imageUrl}
             placeholderColorSeed={searchRecord.recordId}
-            placeholder={searchRecord.label}
+            placeholder={displayText}
             size="md"
             type={getAvatarType(objectMetadataItem.nameSingular) ?? 'rounded'}
           />
         }
-        text={searchRecord.label}
+        text={displayText}
       />
     </StyledSelectableItem>
   );