From b5a06e593c4317da69b2010d0c70659b349b10d3 Mon Sep 17 00:00:00 2001
From: Andy Dvorak <advorak@google.com>
Date: Tue, 12 Feb 2019 15:52:31 -0800
Subject: [PATCH] WIP: Address review comments

---
 packages/mdc-drawer/dismissible/foundation.ts | 13 +++++++++----
 packages/mdc-drawer/index.ts                  | 10 +++++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/mdc-drawer/dismissible/foundation.ts b/packages/mdc-drawer/dismissible/foundation.ts
index c4a785eff4f..3432039e3ad 100644
--- a/packages/mdc-drawer/dismissible/foundation.ts
+++ b/packages/mdc-drawer/dismissible/foundation.ts
@@ -127,12 +127,12 @@ class MDCDismissibleDrawerFoundation extends MDCFoundation<MDCDrawerAdapter> {
   /**
    * Handles a transition end event on the root element.
    */
-  handleTransitionEnd(evt: Event) {
+  handleTransitionEnd(evt: TransitionEvent) {
     const {OPENING, CLOSING, OPEN, ANIMATE, ROOT} = cssClasses;
 
     // In Edge, transitionend on ripple pseudo-elements yields a target without classList, so check for Element first.
-    const isElement = evt.target instanceof Element;
-    if (!isElement || !this.adapter_.elementHasClass(evt.target as Element, ROOT)) {
+    const isRootElement = this.isElement_(evt.target) && this.adapter_.elementHasClass(evt.target, ROOT);
+    if (!isRootElement) {
       return;
     }
 
@@ -165,7 +165,7 @@ class MDCDismissibleDrawerFoundation extends MDCFoundation<MDCDrawerAdapter> {
   /**
    * Runs the given logic on the next animation frame, using setTimeout to factor in Firefox reflow behavior.
    */
-  private runNextAnimationFrame_(callback: Function) {
+  private runNextAnimationFrame_(callback: () => void) {
     cancelAnimationFrame(this.animationFrame_);
     this.animationFrame_ = requestAnimationFrame(() => {
       this.animationFrame_ = 0;
@@ -173,6 +173,11 @@ class MDCDismissibleDrawerFoundation extends MDCFoundation<MDCDrawerAdapter> {
       this.animationTimer_ = setTimeout(callback, 0);
     });
   }
+
+  private isElement_(element: unknown): element is Element {
+    // In Edge, transitionend on ripple pseudo-elements yields a target without classList.
+    return Boolean((element as Element).classList);
+  }
 }
 
 export {MDCDismissibleDrawerFoundation as default, MDCDismissibleDrawerFoundation};
diff --git a/packages/mdc-drawer/index.ts b/packages/mdc-drawer/index.ts
index b5981cd3e9d..5f57eaeb2f3 100644
--- a/packages/mdc-drawer/index.ts
+++ b/packages/mdc-drawer/index.ts
@@ -57,7 +57,7 @@ class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {
   }
 
   private previousFocus_?: Element | null;
-  private scrim_!: Element | null; // assigned in initialSyncWithDOM()
+  private scrim_!: HTMLElement | null; // assigned in initialSyncWithDOM()
   private list_?: MDCList; // assigned in initialize()
 
   private focusTrap_?: createFocusTrap.FocusTrap; // assigned in initialSyncWithDOM()
@@ -82,11 +82,11 @@ class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {
     const {MODAL} = MDCDismissibleDrawerFoundation.cssClasses;
     const {SCRIM_SELECTOR} = MDCDismissibleDrawerFoundation.strings;
 
-    this.scrim_ = (this.root_.parentNode as Element).querySelector(SCRIM_SELECTOR);
+    this.scrim_ = (this.root_.parentNode as Element).querySelector<HTMLElement>(SCRIM_SELECTOR);
 
     if (this.scrim_ && this.root_.classList.contains(MODAL)) {
       this.handleScrimClick_ = () => (this.foundation_ as MDCModalDrawerFoundation).handleScrimClick();
-      this.scrim_.addEventListener('click', this.handleScrimClick_ as EventListener);
+      this.scrim_.addEventListener('click', this.handleScrimClick_);
       this.focusTrap_ = util.createFocusTrapInstance(this.root_ as HTMLElement, this.focusTrapFactory_);
     }
 
@@ -106,8 +106,8 @@ class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {
     }
 
     const {MODAL} = MDCDismissibleDrawerFoundation.cssClasses;
-    if (this.root_.classList.contains(MODAL)) {
-      this.scrim_!.removeEventListener('click', this.handleScrimClick_ as EventListener);
+    if (this.scrim_ && this.handleScrimClick_ && this.root_.classList.contains(MODAL)) {
+      this.scrim_.removeEventListener('click', this.handleScrimClick_);
       // Ensure drawer is closed to hide scrim and release focus
       this.open = false;
     }