fix: update person details when mgt-person attributes are changed (#2871

)

fix bug in changing mgt-person attributes

---------

Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>

packages/mgt-components/src/components/mgt-person/mgt-person.ts

@@ -156,7 +156,8 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     this._personQuery = value;
-    this.personDetailsInternal = null;
+    this._personDetailsInternal = null;
+    this._personDetails = null;
     void this.requestStateUpdate();
   }
 
@@ -203,7 +204,8 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     this._userId = value;
-    this.personDetailsInternal = null;
+    this._personDetailsInternal = null;
+    this._personDetails = null;
     void this.requestStateUpdate();
   }
 
@@ -273,7 +275,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     this._fetchedPresence = null;
 
     void this.requestStateUpdate();
-    this.requestUpdate('personDetailsInternal');
   }
 
   /**
@@ -299,7 +300,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     this._fetchedPresence = null;
 
     void this.requestStateUpdate();
-    this.requestUpdate('personDetails');
   }
 
   /**
@@ -321,9 +321,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     this._isInvalidImageSrc = !value;
-    const oldValue = this._personImage;
     this._personImage = value;
-    this.requestUpdate('personImage', oldValue);
   }
 
   /**

stories/components/person/person.properties.stories.js

@@ -44,6 +44,32 @@ export const setPersonDetails = () => html`
    </script>
  `;
 
+export const changePersonQuery = () => html`
+  <mgt-person class="my-person" person-query="me" view="threelines"></mgt-person>
+
+  <button class="button">Change person-query </button>
+  <script>
+    const person = document.querySelector('.my-person');
+    const button = document.querySelector('.button');
+    button.addEventListener('click', () => {
+      person.personQuery = 'Isaiah';
+    });
+  </script>
+  `;
+
+export const changeUserId = () => html`
+  <mgt-person class="my-person" person-query="me" view="threelines"></mgt-person>
+
+  <button class="button">Change user-id </button>
+  <script>
+    const person = document.querySelector('.my-person');
+    const button = document.querySelector('.button');
+    button.addEventListener('click', () => {
+      person.userId = '2804bc07-1e1f-4938-9085-ce6d756a32d2';
+    });
+  </script>
+  `;
+
 export const personFallbackDetails = () => html`
    <div class="example">
    <mgt-person person-query="mbowen" view="twoLines" show-presence fallback-details='{"displayName":"Megan Bowen"}'></mgt-person>