people-picker teams-channel-picker ie11 (#491)

* fix for keycontrol and highlighting

* ie11 people-picker center closeIcon

* ie11 no support minheight

* ie11 focus update on lostFocus

Author: vogtn

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

@@ -25,7 +25,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);
@@ -163,7 +163,6 @@ mgt-people-picker .CloseIcon {
   cursor: pointer;
   color: $font-color;
   background-color: rgb(241, 241, 241);
-  position: absolute;
   right: 0px;
 }
 
@@ -276,7 +275,7 @@ mgt-person {
   --color: $font-color;
   color: $font-color;
   margin-bottom: 1px;
-  margin-right: 26px;
+  margin-right: 4px;
 }
 
 :host .search-error-text,

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

@@ -807,6 +807,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
   private lostFocus() {
     this._isFocused = false;
+    this.requestUpdate();
   }
 
   private renderHighlightText(person: IDynamicPerson): TemplateResult {
@@ -943,7 +944,8 @@ 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();
       }

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss

@@ -25,7 +25,7 @@ $input-hover-color: var(--input-hover-color, #323130);
 $input-focus-color: var(--input-focus-color, #0078d4);
 $input-background-color: var(--input-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));
 $dropdown-background-color: var(--dropdown-background-color, white);
 $dropdown-item-selected-background: var(--dropdown-item-selected-background, #deecf9);
 
@@ -46,7 +46,7 @@ $dropdown-item-selected-background: var(--dropdown-item-selected-background, #de
     background-color: $input-background-color;
     font-size: 14px;
     color: $font-color;
-    min-height: 29px;
+    height: 29px;
     line-height: 19px;
     cursor: text;
     border: $input-border;