From b4d8c0c7dae7cb01e3091a84a346e4fe8f2835e3 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Wed, 2 Oct 2024 11:17:24 +0300
Subject: [PATCH] feat: display only selected person in people-picker single
 selection mode (#3327)

---
 .../components/mgt-people-picker/mgt-people-picker.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 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
index 6749be8603..cce5d04000 100644
--- 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[] {