angular / angular/components

bug(mat-chip-grid): mat-chip-grid marks FormControl as dirty on blur without actual value changes

Open
#31,600 4 comments 1 reaction 0 assignees View on GitHub
area: material/chips P3
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 using mat-chip-grid bound to a FormControl, the control is marked as dirty when the user focuses on the input field and then blurs away, even when no chips are added or removed and the value remains unchanged.

### Reproduction

StackBlitz link: [https://stackblitz.com/edit/2za91ztq?file=src%2Fexample%2Fchips-form-control-example.html](https://stackblitz.com/edit/2za91ztq?file=src%2Fexample%2Fchips-form-control-example.html)
Steps to reproduce:
1. Click into the input field
2. Click away (blur) without typing anything or adding any chips
3. Check the FormControl's dirty state - it will be true even though no value changes occurred

### Expected Behavior

The FormControl should only become dirty when the actual value changes (chips added/removed), not merely from focus/blur interaction.

### Actual Behavior

The FormControl becomes dirty after focus/blur interaction even when no chips are added or removed and the value remains unchanged.

### Environment

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

Contributor guide

Open the contributing guide

Research direction

Start by running the linked StackBlitz reproduction, especially src/example/chips-form-control-example.html, and confirm the FormControl becomes dirty after focus and blur without a value change. Trace mat-chip-grid's blur and value-change handling, then verify that dirty state changes only when chips are added or removed.

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
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.