fix: properly validate typed in emails and set them on comma or semi-colon key presses (#1978)

* fix: update the email validation regex

* fix: use an internal property to set any email

this._setAnyMail property is used to check if the comma or semi-colon have been pressed. If they have, then the typed email is checked if it is a valid email and set accordingly.

* docs: add documentation for the private properties

* fix: back to normal index.html

* fix: set any email on Enter keypress

* fix: remove tab key instruction on story

Author: musale

index.html

@@ -62,4 +62,4 @@
     <mgt-todo></mgt-todo>
     <mgt-file-list></mgt-file-list>
   </body>
-</html>
+</html>

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

@@ -6,7 +6,7 @@
  */
 
 import { User } from '@microsoft/microsoft-graph-types';
-import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
+import { customElement, html, state, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { repeat } from 'lit-html/directives/repeat';
 import {
@@ -491,7 +491,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private _type: PersonType = PersonType.person;
   private _groupType: GroupType = GroupType.any;
   private _userType: UserType = UserType.any;
-  private _currentSelectedUser: IDynamicPerson;
   private _userFilters: string;
   private _groupFilters: string;
   private _peopleFilters: string;
@@ -510,9 +509,20 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // current user index to the left of the highlighted users
   private _currentHighlightedUserPos: number = 0;
 
-  @internalProperty() private _isFocused = false;
+  /**
+   * Checks if the input is focused.
+   */
+  @state() private _isFocused = false;
+
+  /**
+   * Switch to determine if a typed email can be set.
+   */
+  @state() private _setAnyEmail: boolean = false;
 
-  @internalProperty() private _foundPeople: IDynamicPerson[];
+  /**
+   * List of people found from the graph calls.
+   */
+  @state() private _foundPeople: IDynamicPerson[];
 
   constructor() {
     super();
@@ -1363,7 +1373,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   }
 
   /**
-   * Adds debounce method for set delay on user input
+   * Handles input from the key up events on the keyboard.
    */
   private onUserKeyUp(event: KeyboardEvent): void {
     const isPaste = (event.ctrlKey || event.metaKey) && event.key === 'v';
@@ -1421,6 +1431,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
     if (event.code === 'Comma' || event.code === 'Semicolon') {
       if (this.allowAnyEmail) {
+        this._setAnyEmail = true;
         event.preventDefault();
         event.stopPropagation();
       }
@@ -1430,10 +1441,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.userInput = input.value;
     const validEmail = isValidEmail(this.userInput);
     if (validEmail && this.allowAnyEmail) {
-      this.handleAnyEmail();
+      if (this._setAnyEmail) {
+        this.handleAnyEmail();
+      }
     } else {
       this.handleUserSearch();
     }
+    this._setAnyEmail = false;
   }
 
   private handleAnyEmail() {
@@ -1544,9 +1558,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           this.addPerson(foundPerson);
           this.hideFlyout();
           this.input.value = '';
-        } else if (this.allowAnyEmail) {
-          this.handleAnyEmail();
         }
+      } else if (this.allowAnyEmail) {
+        this.handleAnyEmail();
       }
     }
 

packages/mgt-components/src/utils/Utils.ts

@@ -242,7 +242,7 @@ export function extractEmailAddress(emailString: string): string {
  * @returns {boolean}
  */
 export function isValidEmail(emailString: string): boolean {
-  const emailRx: RegExp = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
+  const emailRx: RegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return emailRx.test(emailString);
 }
 

stories/components/peoplePicker/peoplePicker.properties.js

@@ -234,7 +234,7 @@ export const pickerDefaultSelectedUserAndGroupIds = () => html`
 
 export const pickerAllowAnyEmail = () => html`
   <mgt-people-picker allow-any-email></mgt-people-picker>
-  <!-- Type any email address and press comma(,), semicolon(;), tab or enter to add it -->
+  <!-- Type any email address and press comma(,), semicolon(;), or enter keys to add it -->
   <script type="module">
     const peoplePicker = document.querySelector('mgt-people-picker');
     peoplePicker.selectedPeople = [{mail: "[email protected]", displayName: "[email protected]"}]