angular / angular/components

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

Ouverte
#25,809 4 commentaires 5 réactions 0 personnes assignées Voir sur GitHub
area: material/input P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’exemple de chips-autocomplete lié dans l’issue et reproduisez le comportement avec MatAutocomplete et un FormControl. Suivez la manière dont la valeur vide du contrôle atteint le champ de saisie après la sélection d’une option ; le travail est terminé lorsque la mise à jour du FormControl seul efface le texte visible sans accès direct à nativeElement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.