bug(material/chip): textContent of any HTML element inside mat-chip-row is being appended to FormControl value on focus out (blur) event
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### Is this a regression?
- [X] 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 ``, or even just the matChipRemove button is wrapped inside some `` (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 `cancel` in this case) after focusing out of the component.
So for example, value `["Apple"]` becomes `["Apple cancel"]` (because `cancel` is part of ``'s textContent).
```
{{ fruit }}
cancel
```
(when `matChipRemove` button is not wrapped inside `` 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
Guía de contribución
Línea de trabajo
Comienza con los archivos de reproducción src/app/chips-autocomplete-example.html y src/app/chips-autocomplete-example.ts y, después, sigue el comportamiento de Material para blur/focusOut descrito en el issue. Confirma que al perder el foco no se añade el textContent de HTML anidado al valor del control de formulario del chip, incluso cuando matChipRemove está envuelto en ng-container.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100