angular / angular/components

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

オープン
#29,326 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: material/autocomplete P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

MatAutocompleteTrigger クラスとその _setValueAndClose メソッドから始め、リンクされた StackBlitz を使って、optionSelected で mat-option ngFor 配列を空にしながらオプションを選択して動作を再現します。イベントのタイミングを autocomplete パネルのアニメーションと比較します。完了条件は、アニメーションが完了する前に optionSelected と onChangeCallback によってパネルが跳ねないことです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。