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(); + } }; /**