Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
14
Description
When there is any HTML element inside <mat-chip-row>, or even just the matChipRemove button is wrapped inside some <ng-container> (like with *ngIf, checking if the user has the privilege to delete), then the whole chip-row's value contains this element's textContent (button with <mat-icon>cancel</mat-icon> in this case) after focusing out of the component.
So for example, value ["Apple"] becomes ["Apple cancel"] (because cancel is part of <mat-icon>'s textContent).
<mat-chip-row *ngFor="let fruit of formControl.value">
{{ fruit }}
<ng-container *ngIf="true">
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</ng-container>
</mat-chip-row>
(when matChipRemove button is not wrapped inside <ng-container> or any other HTML element then its textContent is being ignored, which, I guess, is correct behavior)
Reproduction
StackBlitz link:
https://stackblitz.com/edit/ovb2sn-s41kjs?file=src%2Fapp%2Fchips-autocomplete-example.html,src%2Fapp%2Fchips-autocomplete-example.ts
Steps to reproduce:
Click on the text input and then focus it out.
This will run Material's blur/focusOut code and update the form control value with the chips' textContent which becomes ["Apple cancel"].
More focus in/out clicks will keep appending cancel to the form control's value.
Expected Behavior
Not appending HTML elements' textContent to chip's form control value
Actual Behavior
HTML element's textContent is being appended to chip's form control value
Environment
- Angular: 15+
- CDK/Material: 15+
- Browser(s): Any browser
- Operating System (e.g. Windows, macOS, Ubuntu): Any OS