feat: display only selected person in people-picker single selection …

…mode (#3327)
microsoftgraph · Oct 2, 2024 · b4d8c0c · b4d8c0c
1 parent 5a11252
commit b4d8c0c
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -630,14 +630,19 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
     }
 
     const selectedPeopleTemplate = this.renderSelectedPeople(this.selectedPeople);
-    const inputTemplate = this.renderInput(selectedPeopleTemplate);
-    const flyoutTemplate = this.renderFlyout(inputTemplate);
 
-    return html`
+    if (this.selectionMode === 'single' && this.selectedPeople.length === 1) {
+      return selectedPeopleTemplate;
+    } else {
+      const inputTemplate = this.renderInput(selectedPeopleTemplate);
+      const flyoutTemplate = this.renderFlyout(inputTemplate);
+
+      return html`
       <div>
         ${flyoutTemplate}
       </div>
     `;
+    }
   }
 
   protected args(): unknown[] {