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: () => {