bug(mat-chip-option): selected CSS classes are not applied in a specific case
- 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 the selected property changes, there is a case where the selected CSS classes are not applied.
I have an application where we have a list of selectable teams and the possibility to filter them by gender (male or female). By default the 1st team is selected. On this app, we also want the selected team to be changed to the first matching the current filter if the currently selected team does not match the filter.
To illustrate the bug and show that the property that is passed to the mat-chip-option is indeed updated I have also set the disabled attribute with the same property as selected to show that this one works properly.
### Reproduction
StackBlitz link: https://stackblitz.com/~/github.com/FabienCH/mat-chip-option-selected
- When changing the gender filter (unselect male) without changing the selected team, the selected CSS classes are applied to the selected team (team 1 female).
- When changing the selected team by clicking on an option the selected CSS classes are applied.
Steps to reproduce:
1. Change the selected team by clicking on an option (click on a male team for example)
2. Change the gender filter (unselect male) => the selected CSS classes are not applied
You can see that the selected property of the option is true and the disabled CCS classes are applied
### Expected Behavior
The selected CSS classes should be applied.
### Actual Behavior
The selected CSS classes are not applied.
### Environment
- Angular: 20.1
- CDK/Material: 20.1
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par exécuter la reproduction StackBlitz liée et examinez le comportement de mat-chip-option lorsque l’équipe sélectionnée change après un filtrage par genre. Comparez les classes CSS selected et disabled pendant les deux étapes de reproduction ; le travail est considéré comme terminé lorsque les classes CSS selected sont appliquées lorsque la propriété selected change via le filtrage, ainsi qu’après avoir cliqué sur une option.
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
- 38/100