WIP: Address review comments

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,14 +165,19 @@ 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;
       clearTimeout(this.animationTimer_);
       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};

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;
     }