angular / angular/components

bug(mat-chip-option): selected CSS classes are not applied in a specific case

Aperta
#31,539 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: material/chips 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

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia eseguendo la riproduzione StackBlitz collegata e analizza il comportamento di mat-chip-option quando il team selezionato cambia dopo il filtraggio per genere. Confronta le classi CSS selected e disabled durante entrambi i passaggi della riproduzione; il lavoro è completato quando le classi CSS selected vengono applicate quando la proprietà selected cambia tramite il filtraggio, così come dopo aver fatto clic su un’opzione.

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.