angular / angular/components

bug(material/chip): textContent of any HTML element inside mat-chip-row is being appended to FormControl value on focus out (blur) event

Abierto
#27,839 1 comentario 0 reacciones 0 asignados Ver en GitHub
area: material/chips P3
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.