angular / angular/components

bug(CHIPS AUTOCOMPLETE): chips autocomplete won't emit optionSelected if matChipInputAddOnBlur is set to true

Ouverte
#24,855 1 commentaire 3 réactions 0 personnes assignées Voir sur GitHub
area: material/chips 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

When creating a mat autocomplete with chips the selectedOption event is not fired if the input associated with the chip-list has the [matChipInputAddOnBlur] property set as true and has a value typed in.

if you set the matChipInputAddOnBlur to false it will work perfectly, but I also need it to fire on blur to validate or insert the inputted value.

### Reproduction

Steps to reproduce:
1. visit https://stackblitz.com/edit/angular-rmuzjg-t8dcn6?file=src/app/chips-autocomplete-example.ts
2. type "a" into the input
3. click orange (or any other option except apple)

there is a console.log('selected') in the function associated with the (optionSelected) event, it won't be fired.

### Expected Behavior

The option clicked (orange) should be added to the chips.

The autocomplete's optionSelected event should be fired.

### Actual Behavior

a chip with the value inputted is added to the chips but the option clicked is not.

the autocomplete's optionSelected event is not fired.

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et suivez l’interaction entre le comportement matChipInputAddOnBlur de l’entrée de puces et l’événement optionSelected de la saisie semi-automatique. Vérifiez le cas où du texte est saisi et où l’on clique sur orange, puis confirmez que l’option cliquée est ajoutée et que optionSelected est déclenché, tandis que la valeur saisie est traitée comme prévu.

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

Recevez les nouvelles issues par e-mail

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