From 53b291c99a9d842e67acb225a77aba16a3ef4aaf Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Fri, 5 Jan 2024 11:50:40 -0800
Subject: [PATCH] fix: enter email keypress behavior (#2928)

updated the keydown for the people-picker behavior to ensure that tab and enter can be used to enter email addresses when the allow-any-email attribute is present
---
 .../mgt-people-picker/mgt-people-picker.ts     | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 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 5b23da1c19..5342211ae0 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
@@ -1607,25 +1607,29 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           if (this.hasMaxSelections) {
             this.disableTextInput();
           }
+          return;
         }
-      } else if (this.allowAnyEmail) {
+      }
+
+      if (this.allowAnyEmail) {
         this.handleAnyEmail();
       } else {
         this.showFlyout();
       }
     }
 
-    if (keyName === 'Tab') {
-      this.hideFlyout();
-    }
-
-    if ([';', ','].includes(keyName)) {
+    if ([';', ',', 'Tab'].includes(keyName)) {
       if (this.allowAnyEmail) {
-        event.preventDefault();
+        // need to ensure the tab key does tab things
+        if ('Tab' !== keyName) event.preventDefault();
         this.userInput = this.input.value;
         this.handleAnyEmail();
       }
     }
+    // need to ensure that the tab key hides the flyout even if the input doesn't have an email address
+    if (keyName === 'Tab') {
+      this.hideFlyout();
+    }
   };
 
   /**