angular / angular/components

bug(autocomplete): optionSelected and onChangeCallback is called before the animation completes

Abierto
#29,326 2 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/autocomplete P4
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

v16.1.8

### Description

There is a _setValueAndClose method in the MatAutocompleteTrigger class that doesn't take into account the time to complete the animation, this has even been flagged todo but still not fixed. Currently, if we in optionSelected decide to clear the array used in ngFor for mat-option, we will get the array cleared before the panel closes and there will be a corresponding jump

![image](https://github.com/angular/components/assets/73141739/0a03a21b-848b-4ae2-af92-35a50599d2a7)

@crisbeto

### Reproduction

StackBlitz link: https://components-issue-v4ujjj.stackblitz.io
Steps to reproduce:
1. put the focus in the field
2. pick a value from the list

### Expected Behavior

the optionSelected event will be called after the animation is complete, the menu will not jump after the array is cleared

### Actual Behavior

optionSelected event was triggered without waiting for the animation to complete, clearing the array caused the panel to jump

### Environment

- Angular: 16.2.12
- CDK/Material: 16.2.14
- Browser(s): google chrome v126.0.6478.127
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la clase MatAutocompleteTrigger y su método _setValueAndClose, y luego reproduce el comportamiento usando el StackBlitz vinculado, seleccionando una opción mientras vacías el array mat-option ngFor en optionSelected. Compara el momento de los eventos con la animación del panel de autocompletado; se considera terminado cuando optionSelected y onChangeCallback no hacen que el panel salte antes de que termine la animación.

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
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.