angular / angular/components

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

Offen
#28,828 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/listbox P3
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.