angular / angular/components

bug(MatChipGrid): Chips form controls do not update values until focus is achieved and lost

Offen
#28,065 3 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/chips P2
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

There are several scenarios where this is a breaking bug:
* With a form that has a required chips field and a conditionally disabled element, the element will remain disabled even after the field is valid until it loses focus. This is confusing to users if they don't realize they need to remove focus from the chips field in order for the element to become enabled.
* When a required chips component is the last field in a form, followed by a conditionally disabled submit button and a cancel button, a user may accidentally hit the cancel button if they attempt to tab to the submit button.
* With chips that can be dragged and dropped, the chips field does not necessarily receive focus when chips are moved around. This results in chips being visibly moved, but the form control value does not get updated. Since order generally matters for chips that can be dragged and dropped, a user could get the desired order visually, while a different order gets persisted upon submission.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-material-chips-bug-f6octd?file=src%2Fmain.ts
Steps to reproduce:
1. Create a required chips field followed by a submit button conditionally enabled by the validation of the preceding field
2. Focus on chips input
3. Select option or type out input
4. Hit **Enter** key on keyboard
5. Hit **Tab** key on keyboard

### Expected Behavior

The submit button should receive focus because it is enabled after hitting **Enter** in the chips field. The chips form control value should be updated immediately when a chip is created.

### Actual Behavior

The submit button does not receive focus.

### Environment

- Angular: 16.2.12
- CDK/Material: 16.2.11
- Browser(s): Tested in Chrome and Firefox, likely reproducible in others
- Operating System (e.g. Windows, macOS, Ubuntu): Tested in Windows, likely reproducible in others

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion unter src/main.ts und verfolge das Update-Verhalten von MatChipGrid für form-control. Vergleiche die Szenarien mit Enter, Tab und Drag-and-drop mit der erwarteten sofortigen Weitergabe des Werts und dem Fokusverhalten. Als abgeschlossen gilt die Aufgabe, wenn der Wert des Controls und der Zustand des abhängigen Buttons sofort aktualisiert werden, ohne dass der Fokus verloren gehen muss.

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

Neue Issues direkt in Ihr Postfach

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