angular / angular/components

bug(MatAutocomplete): MatAutocomplete + FormControl does not clear input correctly after option selection

Aperta
#25,809 4 commenti 5 reazioni 0 assegnatari Vedi su GitHub
area: material/input P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

See example: https://material.angular.io/components/chips/examples#chips-autocomplete

In this example, after selecting an autocomplete option, we want to create a new chip and clear the typed text in the input element. The input is bound to a FormControl instance, so it should be possible to clear the input by simply calling `this.fruitCtrl.setValue(null)` or `this.fruitCtrl.setValue('')`. Instead, the previously typed text remains visible, but if you subscribe to the `FormControl.valueChanges` property you will see the new empty value emitted correctly.

The example works around this issue by accessing the native input element and updating the value directly.

### Reproduction

Steps to reproduce:
1. See example https://material.angular.io/components/chips/examples#chips-autocomplete
2. Remove the nativeElement reference
3. Input text remains visible despite the FormControl instance correctly emitting the new value, creating an inconsistent state

### Expected Behavior

It should be enough to just update the FormControl to ensure the input element has the correct value set.

### Actual Behavior

The input element is left in an inconsistent state unless the user manually updates the native element's value directly.

### Environment

- Angular: n/a (internal stable version http://go/ng-cli)
- CDK/Material: n/a
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con l'esempio di chips-autocomplete collegato nell'issue e riproduci il comportamento usando MatAutocomplete con un FormControl. Traccia il modo in cui il valore vuoto del controllo raggiunge il campo di input dopo la selezione di un'opzione; il lavoro è completato quando l'aggiornamento del solo FormControl cancella il testo visibile senza accedere direttamente a nativeElement.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.