people-picker bugs (#461)

* Leftarrow Rightarrow fix for people-picker

* removing propagation from picker

* flyout functionality upon selection of person

* ie11 fix for eight digit hex and Code (enter and tab) incompatibilities.

* backspace re-adds removed selected people to list, also handles infinite loading spinner

* necessary requestUpdate for ie11 focus change

Author: nmetulev

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -27,7 +27,7 @@ $input-focus-color: var(--input-focus-color, #0078d4);
 $input-background-color: var(--input-background-color, var(--people-list-background-color, white));
 
 $dropdown-background-color: var(--dropdown-background-color, white);
-$dropdown-item-hover-background: var(--dropdown-item-hover-background, #f1f1f1dd);
+$dropdown-item-hover-background: var(--dropdown-item-hover-background, rgba(241, 241, 241, 0.87));
 
 $placeholder-default-color: var(--placeholder-default-color, #605e5c);
 $placeholder-focus-color: var(--placeholder-focus-color, #323130);

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

@@ -263,6 +263,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
   private defaultPeople: IDynamicPerson[];
 
+  private selectionMade = false;
+
   // tracking of user arrow key input for selection
   private _arrowSelectionCount: number = 0;
   // List of people requested if group property is provided
@@ -289,7 +291,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   public connectedCallback() {
     super.connectedCallback();
-    this.addEventListener('click', e => e.stopPropagation());
   }
 
   /**
@@ -316,10 +317,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     }
 
     if (shouldShow) {
-      window.requestAnimationFrame(() => {
-        // Mouse is focused on input
-        this.showFlyout();
-      });
+      if (!this.selectionMade) {
+        window.requestAnimationFrame(() => {
+          // Mouse is focused on input
+          this.showFlyout();
+        });
+      } else {
+        this.selectionMade = false;
+      }
     }
   }
 
@@ -787,6 +792,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
         this.loadState();
         this._foundPeople = [];
+        this.selectionMade = true;
       }
     }
   }
@@ -803,6 +809,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
   private lostFocus() {
     this._isFocused = false;
+    this.requestUpdate();
   }
 
   private renderHighlightText(person: IDynamicPerson): TemplateResult {
@@ -847,8 +854,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * Adds debounce method for set delay on user input
    */
   private onUserKeyUp(event: KeyboardEvent): void {
-    if (event.keyCode === 40 || event.keyCode === 38) {
-      // keyCodes capture: down arrow (40) and up arrow (38)
+    if (event.keyCode === 40 || event.keyCode === 39 || event.keyCode === 38 || event.keyCode === 37) {
+      // keyCodes capture: down arrow (40), right arrow (39), up arrow (38) and left arrow (37)
       return;
     }
 
@@ -865,6 +872,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       this.userInput = '';
       // remove last person in selected list
       this.selectedPeople = this.selectedPeople.splice(0, this.selectedPeople.length - 1);
+      this.loadState();
       // reset flyout position
       this.hideFlyout();
       this.showFlyout();
@@ -873,7 +881,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       return;
     }
 
-    this.handleUserSearch(input);
+    if (input.value) {
+      this.handleUserSearch(input);
+    }
   }
 
   private onPersonClick(person: IDynamicPerson): void {
@@ -882,7 +892,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (this.selectionMode === 'single') {
       return;
     }
-    this.focus();
   }
 
   /**
@@ -933,7 +942,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         event.preventDefault();
       }
     }
-    if (event.code === 'Tab' || event.code === 'Enter') {
+
+    if (event.keyCode === 9 || event.keyCode === 13) {
+      // keyCodes capture: tab (9) and enter (13)
       if (this._foundPeople.length) {
         event.preventDefault();
       }