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 { /** * 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 { /** * 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 { 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 { } 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 { 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(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 { } 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; }