angular / angular/components

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

Offen
#29,326 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/autocomplete P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Klasse MatAutocompleteTrigger und ihrer Methode _setValueAndClose. Reproduziere anschließend das Verhalten mithilfe des verknüpften StackBlitz, indem du eine Option auswählst und dabei das mat-option ngFor-Array in optionSelected leerst. Vergleiche das Timing der Ereignisse mit der Animation des Autocomplete-Panels. Die Aufgabe ist abgeschlossen, wenn optionSelected und onChangeCallback nicht dazu führen, dass das Panel springt, bevor die Animation abgeschlossen ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.