diff --git a/src/material-experimental/mdc-chips/chip.spec.ts b/src/material-experimental/mdc-chips/chip.spec.ts index 6858ccde061f..d4c9b7125913 100644 --- a/src/material-experimental/mdc-chips/chip.spec.ts +++ b/src/material-experimental/mdc-chips/chip.spec.ts @@ -104,6 +104,17 @@ describe('MDC-based MatChip', () => { expect(testComponent.chipRemove).toHaveBeenCalledWith({chip: chipInstance}); }); + it('should make the chip non-focusable when it is removed', () => { + chipInstance.remove(); + fixture.detectChanges(); + + const fakeEvent = createFakeEvent('transitionend'); + (fakeEvent as any).propertyName = 'width'; + chipNativeElement.dispatchEvent(fakeEvent); + + expect(chipNativeElement.style.display).toBe('none'); + }); + it('should be able to disable ripples through ripple global options at runtime', () => { expect(chipInstance.rippleDisabled).toBe(false, 'Expected chip ripples to be enabled.'); diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts index 2866120ad652..7c7c829e6b4b 100644 --- a/src/material-experimental/mdc-chips/chip.ts +++ b/src/material-experimental/mdc-chips/chip.ts @@ -262,7 +262,13 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte // future. }, notifyTrailingIconInteraction: () => this.removeIconInteraction.emit(this.id), - notifyRemoval: () => this.removed.emit({chip: this}), + notifyRemoval: () => { + this.removed.emit({ chip: this }); + + // When MDC removes a chip it just transitions it to `width: 0px` which means that it's still + // in the DOM and it's still focusable. Make it `display: none` so users can't tab into it. + this._elementRef.nativeElement.style.display = 'none'; + }, getComputedStyleValue: propertyName => { // This function is run when a chip is removed so it might be // invoked during server-side rendering. Add some extra checks just in case.