angular / angular/components

bug(CdkListbox): cdkOption requires additional event to rerender after list of options changed

Ouverte
#28,828 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/listbox 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 any **option was selected** in the list and than user filtered them somehow and back to the initial list, **that selected option** will be rendered incorrectly.

https://github.com/angular/components/assets/13451032/4392054a-68e3-439e-a250-0084c943d37d

P.S. A bit similar problem was there: https://github.com/angular/components/issues/28557

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xvgkha?file=src%2Findex.html,src%2Fmain.ts
Steps to reproduce:
1. Click **"Ron"** option (it becomes true)
2. Type in `input` letter **"J"**
3. Remove letter **"J"**
4. See that option **"Ron"** is false.
5. Type in input letter **"R"** or click outside `input`
6. See that option **"Ron"** is true.

### Expected Behavior

Option should be rendered immediately based on its internal state (`isSelected()/isActive()`).

### Actual Behavior

Option requires one more event to be rendered based on its internal state (`isSelected()/isActive()`).

### Environment

- Angular: 17
- CDK/Material: 17.3.3
- Browser(s): Chrome and Safari
- 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, en particulier src/index.html et src/main.ts, et suivez les étapes de filtrage pour CdkListbox et cdkOption. Comparez l’état rendu de l’option sélectionnée après le retour de la liste à son contenu initial. Le travail est terminé lorsque l’option est rendue immédiatement à partir de son état interne isSelected()/isActive(), sans nécessiter d’autre événement de saisie ou de focus.

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.