fix: apply keyboard focus when removing selected person or adding person from suggestion list on people-picker

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -854,7 +854,8 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
             id="${person.id}"
             class="searched-people-list-result"
             role="option"
-            @click="${() => this.handleSuggestionClick(person)}">
+            @click="${() => this.handleSuggestionClick(person)}"
+            @keydown="${(e: KeyboardEvent) => this.handleSuggestionKeydown(person, e)}">
               ${this.renderPersonResult(person)}
           </li>
         `
@@ -1200,9 +1201,6 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
       }
       return p.id !== person.id;
     });
-    if (this.hasMaxSelections) {
-      this.enableTextInput();
-    }
     this.selectedPeople = filteredPersonArr;
     void this.loadState();
   }
@@ -1216,6 +1214,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   protected handleRemovePersonKeyDown(person: IDynamicPerson, e: KeyboardEvent): void {
     if (e.key === 'Enter') {
       this.removePerson(person, e);
+      this.enableTextInput();
     }
   }
 
@@ -1243,6 +1242,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         this._foundPeople = [];
         this._arrowSelectionCount = -1;
       }
+      this.enableTextInput();
     }
   }
 
@@ -1381,6 +1381,18 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
     this.hideFlyout();
   }
 
+  // handle suggestion list item keydown
+  private handleSuggestionKeydown(person: IDynamicPerson, e: KeyboardEvent): void {
+    if (e.key === 'Enter') {
+      this.addPerson(person);
+      if (this.hasMaxSelections) {
+        this.disableTextInput();
+        this.input.value = '';
+      }
+      this.hideFlyout();
+    }
+  }
+
   /**
    * Tracks event on user input in search
    *