From 5c50d22eb1b902b3ac01541027eb073643529d51 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Thu, 5 Oct 2023 21:04:55 +0000
Subject: [PATCH] fixing render problem when given and surname are null on
 personType objects

---
 .../components/mgt-person/mgt-person.tests.ts    | 16 ++++++++++++++++
 .../src/components/mgt-person/mgt-person.ts      |  9 +++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts
index e736aa783b..ab14d9fe95 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.tests.ts
@@ -67,4 +67,20 @@ describe('mgt-person - tests', () => {
 
     expect(screen.queryByTestId('flyout-slot')).toBeDefined();
   });
+
+  it('should render with initials using the supplied details', async () => {
+    Providers.globalProvider = new MockProvider(true);
+    person = await fixture(
+      `<mgt-person person-details='${JSON.stringify({
+        displayName: 'Frank Herbert',
+        mail: 'herbert@dune.net',
+        givenName: null,
+        surname: null,
+        personType: {}
+      })}' view="twoLines"></mgt-person>`
+    );
+    expect(person).not.toBeUndefined();
+    const initials = await screen.findByText('FH');
+    expect(initials).toBeDefined();
+  });
 });
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index f7e3f8414c..7b966535fb 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -261,10 +261,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    *
    * @type {IDynamicPerson}
    */
-  @property({
-    attribute: null,
-    type: Object
-  })
+  @state()
   private get personDetailsInternal(): IDynamicPerson {
     return this._personDetailsInternal;
   }
@@ -1216,8 +1213,8 @@ export class MgtPerson extends MgtTemplatedComponent {
 
     let initials = '';
     if (isUser(person)) {
-      initials += person.givenName[0].toUpperCase();
-      initials += person.surname[0].toUpperCase();
+      initials += person.givenName?.[0].toUpperCase() ?? '';
+      initials += person.surname?.[0].toUpperCase() ?? '';
     }
 
     if (!initials && person.displayName) {