From 44737b4630b2708dc1e1288cc4074a1d4103363e Mon Sep 17 00:00:00 2001 From: crisbeto Date: Tue, 31 Dec 2019 07:48:38 +0200 Subject: [PATCH] fix(material-experimental/mdc-chips): error on IE and Edge due to unsupported classList Fixes an error that was being thrown on click for the MDC-based chips, because we were trying to interact with the `classList` of a ripple. It seems like Edge doesn't support `classList` on elements outside the DOM. --- src/material-experimental/mdc-chips/chip-set.ts | 3 ++- src/material-experimental/mdc-chips/chip.ts | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-chips/chip-set.ts b/src/material-experimental/mdc-chips/chip-set.ts index c25152c27d9d..c78f40aa1e13 100644 --- a/src/material-experimental/mdc-chips/chip-set.ts +++ b/src/material-experimental/mdc-chips/chip-set.ts @@ -294,7 +294,8 @@ export class MatChipSet extends _MatChipSetMixinBase implements AfterContentInit let currentElement = event.target as HTMLElement | null; while (currentElement && currentElement !== this._elementRef.nativeElement) { - if (currentElement.classList.contains('mdc-chip')) { + // Null check the classList, because IE and Edge don't support it on all elements. + if (currentElement.classList && currentElement.classList.contains('mdc-chip')) { return true; } diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts index 2866120ad652..ac77287fa0d9 100644 --- a/src/material-experimental/mdc-chips/chip.ts +++ b/src/material-experimental/mdc-chips/chip.ts @@ -250,7 +250,10 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte addClassToLeadingIcon: (className) => this.leadingIcon.setClass(className, true), removeClassFromLeadingIcon: (className) => this.leadingIcon.setClass(className, false), eventTargetHasClass: (target: EventTarget | null, className: string) => { - return target ? (target as Element).classList.contains(className) : false; + // We need to null check the `classList`, because IE and Edge don't support it on SVG elements + // and Edge seems to throw for ripple elements, because they're outside the DOM. + return (target && (target as Element).classList) ? + (target as Element).classList.contains(className) : false; }, notifyInteraction: () => this.interaction.emit(this.id), notifySelection: () => {