fix(mdc chips) Fix matChipRemove Expression has changed error

[vanessanschmitt]

This line works fine with mat-icon, but was causing errors in a
unit test environment when matChipRemove was on a button element.

Defer the tab index update to avoid the errors.

[vanessanschmitt]

@jelbourn or @crisbeto, would one of you mind taking a look?

[crisbeto]

LGTM

[jelbourn]

Could this be done earlier in the component lifecycle to avoid the extra round of change detection?

[vanessanschmitt]

I think the earliest it can be done is in ngAfterContentInit, because the removeIcon is a ContentChild.

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

Line 230 in 52dddcc

@ContentChild(MatChipRemove, {static: false}) removeIcon: MatChipRemove;

Another possible fix would be injecting the parent chip into the remove icon and setting the tabIndex property in the remove icon's constructor. We'd have to make an injection token, or put the icons back in the chip file, like how they are in the non-mdc chips:

components/src/material/chips/chip.ts

Line 401 in 52dddcc

constructor(protected _parentChip: MatChip) {}

[jelbourn]

Ack, it's fine for now, then. Someday I want to audit the library's use of this pattern and see if we can use an alternative approach

[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.}