From d25f00e04fcbc57cfff823c1e597cbc5149790fd Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:39:40 +0100
Subject: [PATCH] Fix avatar placeholder not displayed (#2611)

---
 .../field/meta-types/hooks/useRelationField.ts       | 12 +++++++-----
 front/src/modules/users/components/Avatar.tsx        |  1 -
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/front/src/modules/ui/object/field/meta-types/hooks/useRelationField.ts b/front/src/modules/ui/object/field/meta-types/hooks/useRelationField.ts
index ea8b80ea5..6eeaef7b4 100644
--- a/front/src/modules/ui/object/field/meta-types/hooks/useRelationField.ts
+++ b/front/src/modules/ui/object/field/meta-types/hooks/useRelationField.ts
@@ -39,7 +39,7 @@ export const useRelationField = () => {
       if (fieldPathParts.length === 1) {
         name += record[fieldPathParts[0]];
       } else if (fieldPathParts.length === 2) {
-        name += record[fieldPathParts[0]][fieldPathParts[1]];
+        name += record[fieldPathParts[0]][fieldPathParts[1]] + ' ';
       } else {
         throw new Error(
           `Invalid field path ${fieldPath}. Relation picker only supports field paths with 1 or 2 parts.`,
@@ -47,12 +47,14 @@ export const useRelationField = () => {
       }
     }
 
+    const avatarUrl = record[fieldDefinition.metadata.imageIdentifierUrlField];
     return {
       id: record.id,
-      name: record[name],
-      avatarUrl:
-        fieldDefinition.metadata.imageIdentifierUrlPrefix +
-        record[fieldDefinition.metadata.imageIdentifierUrlField],
+      name: name.trimEnd(),
+      avatarUrl: avatarUrl
+        ? fieldDefinition.metadata.imageIdentifierUrlPrefix +
+          record[fieldDefinition.metadata.imageIdentifierUrlField]
+        : '',
       avatarType: fieldDefinition.metadata.imageIdentifierFormat,
       record: record,
     };
diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx
index bd26e4d01..acefd87f7 100644
--- a/front/src/modules/users/components/Avatar.tsx
+++ b/front/src/modules/users/components/Avatar.tsx
@@ -98,7 +98,6 @@ export const Avatar = ({
 }: AvatarProps) => {
   const noAvatarUrl = !isNonEmptyString(avatarUrl);
   const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
-
   useEffect(() => {
     if (avatarUrl) {
       new Promise((resolve) => {