diff --git a/src/material-experimental/mdc-chips/chip-action.ts b/src/material-experimental/mdc-chips/chip-action.ts index d19bb24409b5..a7c42ffcdfa4 100644 --- a/src/material-experimental/mdc-chips/chip-action.ts +++ b/src/material-experimental/mdc-chips/chip-action.ts @@ -88,11 +88,12 @@ export class MatChipAction /** Whether the action is interactive. */ @Input() isInteractive = true; - _handleClick(_event: MouseEvent) { + _handleClick(event: MouseEvent) { // Usually these events can't happen while the chip is disabled since the browser won't // allow them which is what MDC seems to rely on, however the event can be faked in tests. if (!this.disabled && this.isInteractive) { this._foundation.handleClick(); + event.preventDefault(); } } diff --git a/src/material-experimental/mdc-chips/chip-remove.spec.ts b/src/material-experimental/mdc-chips/chip-remove.spec.ts index e42d0de9411e..427ffb9fe3f3 100644 --- a/src/material-experimental/mdc-chips/chip-remove.spec.ts +++ b/src/material-experimental/mdc-chips/chip-remove.spec.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {waitForAsync, ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing'; -import {dispatchKeyboardEvent} from '@angular/cdk/testing/private'; +import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing/private'; import {By} from '@angular/platform-browser'; import {SPACE, ENTER} from '@angular/cdk/keycodes'; import {MDCChipAnimation, MDCChipCssClasses} from '@material/chips/chip'; @@ -121,6 +121,14 @@ describe('MDC-based Chip Remove', () => { const buttonElement = chipNativeElement.querySelector('.mdc-evolution-chip__icon--trailing')!; expect(buttonElement.classList.contains('mat-mdc-focus-indicator')).toBe(true); })); + + it('should prevent the default click action', fakeAsync(() => { + const buttonElement = chipNativeElement.querySelector('button')!; + const event = dispatchMouseEvent(buttonElement, 'click'); + triggerRemoveSequence(); + + expect(event.defaultPrevented).toBe(true); + })); }); }); diff --git a/src/material/chips/chip-remove.spec.ts b/src/material/chips/chip-remove.spec.ts index cf333f97862f..4632934cb376 100644 --- a/src/material/chips/chip-remove.spec.ts +++ b/src/material/chips/chip-remove.spec.ts @@ -2,6 +2,7 @@ import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {MatChip, MatChipsModule} from './index'; +import {dispatchMouseEvent} from '@angular/cdk/testing/private'; describe('Chip Remove', () => { let fixture: ComponentFixture; @@ -74,6 +75,14 @@ describe('Chip Remove', () => { expect(testChip.didRemove).not.toHaveBeenCalled(); }); + + it('should prevent the default click action', () => { + const buttonElement = chipNativeElement.querySelector('button')!; + const event = dispatchMouseEvent(buttonElement, 'click'); + fixture.detectChanges(); + + expect(event.defaultPrevented).toBe(true); + }); }); }); diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index fb1108ebb0ea..50ac4c7b07c4 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -500,5 +500,6 @@ export class MatChipRemove { // the parent click listener of the `MatChip` would prevent propagation, but it can happen // that the chip is being removed before the event bubbles up. event.stopPropagation(); + event.preventDefault(); } }