angular / angular/components

bug(mat-chip-grid): FormControl's value does not update on change

Open
#31,713 6 comments 2 reactions 0 assignees View on GitHub
area: material/chips P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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 setting `{ updateOn: 'change' }`, with ``, the `FormControl`'s value does not update on `change`, it only updates on `blur`.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/micfsvcz?file=src%2Fexample%2Fchips-form-control-example.ts
Steps to reproduce:
1. Modify values in chip input
2. Observe that value of form-control is not getting updated on change
3. Blur out of the form-filed and observe that form-control's value is getting changed

### Expected Behavior

`FormControl`'s value should update on `change` with below:

1. `{ updateOn: 'change' }`
2. ``

### Actual Behavior

`FormControl`'s value is not updating on `change` with below, it is only updating on `blur`:

1. `{ updateOn: 'change' }`
2. ``

### Environment

- Angular: 20.1.0
- CDK/Material: 20.1.0
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Contributor guide

Open the contributing guide

Research direction

Start with the reproduction in src/example/chips-form-control-example.ts and verify the behavior using the linked StackBlitz example. Trace how mat-chip-grid handles FormControl updates for updateOn: 'change', then confirm that the control value changes before blur and that the existing blur behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.