Deleting an mdc chip does not work when animations are disabled

[atscott]

MDC chip foundation relies on the transition animation for the exit class for processing chip deletion:
https://github.com/material-components/material-components-web/blob/302cfd02ace89acf74c90dd13e0a99afc6112fbc/packages/mdc-chips/chip/foundation.ts#L156

When using NoopAnimationModule transitions are disabled via the _mat-animation-noopable class:

components/src/material-experimental/mdc-chips/chip.ts

Line 108 in 0760454

'[class._mat-animation-noopable]': '_animationsDisabled',

components/src/material/core/style/_noop-animation.scss

Line 18 in 0760454

transition: none;

This means that any application using the NoopAnimationModule (mostly tests) will not handle chip deletion correctly. This could be solved by having a special class that makes transition durations very short when a transition is required for the component to work correctly.

A harder to solve problem (and one that would need to be solved in MDC foundation itself) may be applications that disable transitions with a global css override like * { transition: none; }

One additional note: this issue was observed when using the mdc chips with Angular Ivy enabled. For some reason, the _mat-animation-noopable class isn't being added to the chip when View Engine is enabled (and I have not investigated why that is).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}