diff --git a/src/material/chips/chip-remove.spec.ts b/src/material/chips/chip-remove.spec.ts
index 7e7dc1f6404..3ad3a83ac30 100644
--- a/src/material/chips/chip-remove.spec.ts
+++ b/src/material/chips/chip-remove.spec.ts
@@ -31,33 +31,54 @@ describe('Chip Remove', () => {
describe('basic behavior', () => {
it('should applies the `mat-chip-remove` CSS class', () => {
- let hrefElement = chipNativeElement.querySelector('a')!;
+ let buttonElement = chipNativeElement.querySelector('button')!;
- expect(hrefElement.classList).toContain('mat-chip-remove');
+ expect(buttonElement.classList).toContain('mat-chip-remove');
});
it('should emits (removed) on click', () => {
- let hrefElement = chipNativeElement.querySelector('a')!;
+ let buttonElement = chipNativeElement.querySelector('button')!;
testChip.removable = true;
fixture.detectChanges();
spyOn(testChip, 'didRemove');
- hrefElement.click();
+ buttonElement.click();
+ fixture.detectChanges();
expect(testChip.didRemove).toHaveBeenCalled();
});
+
+ it('should not remove if parent chip is disabled', () => {
+ let buttonElement = chipNativeElement.querySelector('button')!;
+
+ testChip.disabled = true;
+ testChip.removable = true;
+ fixture.detectChanges();
+
+ spyOn(testChip, 'didRemove');
+
+ buttonElement.click();
+ fixture.detectChanges();
+
+ expect(testChip.didRemove).not.toHaveBeenCalled();
+ });
+
});
});
@Component({
template: `
-
+
`
})
class TestChip {
removable: boolean;
+ disabled = false;
didRemove() {}
}
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
index a60323382d1..0d045cc2d46 100644
--- a/src/material/chips/chip.ts
+++ b/src/material/chips/chip.ts
@@ -394,8 +394,10 @@ export class MatChipRemove {
/** Calls the parent chip's public `remove()` method if applicable. */
_handleClick(event: Event): void {
- if (this._parentChip.removable) {
- this._parentChip.remove();
+ const parentChip = this._parentChip;
+
+ if (parentChip.removable && !parentChip.disabled) {
+ parentChip.remove();
}
// We need to stop event propagation because otherwise the event will bubble up to the