bug(CdkListbox): cdkOption requires additional event to rerender after list of options changed
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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):
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion, insbesondere mit src/index.html und src/main.ts, und verfolge die Filterschritte für CdkListbox und cdkOption. Vergleiche den gerenderten Zustand der ausgewählten Option, nachdem die Liste zu ihrem ursprünglichen Inhalt zurückkehrt. Als erledigt gilt die Aufgabe, wenn die Option sofort anhand ihres internen isSelected()/isActive()-Zustands gerendert wird, ohne ein weiteres Eingabe- oder Fokusereignis zu erfordern.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100