Fixed catch, query, and boundRect issues in Edge Classic and IE (#377)

Author: nmetulev

src/components/mgt-login/mgt-login.ts

@@ -61,7 +61,9 @@ export class MgtLogin extends MgtBaseComponent {
    * @type {MgtFlyout}
    * @memberof MgtLogin
    */
-  @query('.flyout') protected flyout: MgtFlyout;
+  protected get flyout(): MgtFlyout {
+    return this.renderRoot.querySelector('.flyout');
+  }
 
   /**
    * determines if login menu popup should be showing

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

@@ -113,7 +113,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @type {MgtFlyout}
    * @memberof MgtLogin
    */
-  @query('.flyout') protected flyout: MgtFlyout;
+  protected get flyout(): MgtFlyout {
+    return this.renderRoot.querySelector('.flyout');
+  }
 
   // if search is still loading don't load "people not found" state
   @property({ attribute: false }) private _showLoading: boolean;
@@ -469,7 +471,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         try {
           const graph = provider.graph.forComponent(this);
           this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
-        } catch {
+        } catch (_) {
           this._groupPeople = [];
         }
       }

src/components/mgt-person/mgt-person.ts

@@ -173,7 +173,9 @@ export class MgtPerson extends MgtTemplatedComponent {
    * @type {MgtFlyout}
    * @memberof MgtPerson
    */
-  @query('.flyout') protected flyout: MgtFlyout;
+  protected get flyout(): MgtFlyout {
+    return this.renderRoot.querySelector('.flyout');
+  }
 
   @property({ attribute: false }) private _personCardShouldRender: boolean;
   private _personDetails: IDynamicPerson;

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

@@ -180,7 +180,9 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
   }
 
   // User input in search
-  @query('.team-chosen-input') private _input: HTMLInputElement;
+  private get _input(): HTMLInputElement {
+    return this.renderRoot.querySelector('.team-chosen-input');
+  }
   private _inputValue: string = '';
 
   private _isFocused = false;

src/components/sub-components/mgt-flyout/mgt-flyout.ts

@@ -84,8 +84,12 @@ export class MgtFlyout extends LitElement {
   // if the flyout is opened once, this will keep the flyout in the dom
   private _renderedOnce = false;
 
-  @query('.flyout') private _flyout: HTMLElement;
-  @query('.anchor') private _anchor: HTMLElement;
+  private get _flyout(): HTMLElement {
+    return this.renderRoot.querySelector('.flyout');
+  }
+  private get _anchor(): HTMLElement {
+    return this.renderRoot.querySelector('.anchor');
+  }
 
   private _isOpen: boolean;
 
@@ -261,14 +265,14 @@ export class MgtFlyout extends LitElement {
           // center in between
           left = (windowRect.width - flyoutRect.width) / 2;
         }
-      } else if (anchorRect.x + flyoutRect.width + this._edgePadding > windowRect.width) {
+      } else if (anchorRect.left + flyoutRect.width + this._edgePadding > windowRect.width) {
         // it will render off screen to the right, move to the left
-        left = anchorRect.x - (anchorRect.x + flyoutRect.width + this._edgePadding - windowRect.width);
-      } else if (anchorRect.x < this._edgePadding) {
+        left = anchorRect.left - (anchorRect.left + flyoutRect.width + this._edgePadding - windowRect.width);
+      } else if (anchorRect.left < this._edgePadding) {
         // it will render off screen to the left, move to the right
         left = this._edgePadding;
       } else {
-        left = anchorRect.x;
+        left = anchorRect.left;
       }
 
       if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
@@ -279,20 +283,20 @@ export class MgtFlyout extends LitElement {
           top = (windowRect.height - flyoutRect.height) / 2;
         }
       } else if (
-        anchorRect.y + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height &&
-        anchorRect.y - flyoutRect.height - this._edgePadding > 0
+        anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height &&
+        anchorRect.top - flyoutRect.height - this._edgePadding > 0
       ) {
-        if (windowRect.height - anchorRect.y + flyoutRect.height < 0) {
+        if (windowRect.height - anchorRect.top + flyoutRect.height < 0) {
           bottom = windowRect.height - flyoutRect.height - this._edgePadding;
         } else {
-          bottom = Math.max(windowRect.height - anchorRect.y, this._edgePadding);
+          bottom = Math.max(windowRect.height - anchorRect.top, this._edgePadding);
         }
       } else {
-        if (anchorRect.y + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
+        if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
           // it will render offscreen bellow, move it up a bit
           top = windowRect.height - flyoutRect.height - this._edgePadding;
         } else {
-          top = Math.max(anchorRect.y + anchorRect.height, this._edgePadding);
+          top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
         }
       }
 

src/graph/graph.user.ts

@@ -98,11 +98,11 @@ export async function getUsersForUserIds(graph: IGraph, userIds: string[]): Prom
     }
 
     return people;
-  } catch {
+  } catch (_) {
     // fallback to making the request one by one
     try {
       return Promise.all(userIds.filter(id => id && id !== '').map(id => getUser(graph, id)));
-    } catch {
+    } catch (_) {
       return [];
     }
   }