angular / angular/components

bug(MatChipInput): MatChipInput does not set `mat-form-field-disabled` on MatFormField wrapper when being disabled

Open
#31,468 2 comments 0 reactions 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 a MatChipInput is disabled, it does not set `mat-form-field-disabled` CSS class on its MatFormField wrapper like it does for MatInput.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/xcgzeewq?file=src%2Fexample%2Fchips-input-example.html
Steps to reproduce:
1. There are one disabled MatChipInput and one disabled MatInput in the example
2. The form field wrapper of the MatInput has `mat-form-field-disabled` CSS class, while the form field wrapper of the MatChipInput does not

### Expected Behavior

Both of the form field should set `mat-form-field-disabled` CSS class as the input is disabled.

### Actual Behavior

The form field wrapper of the MatInput has `mat-form-field-disabled` CSS class, while the form field wrapper of the MatChipInput does not

### Environment

- Angular:
- CDK/Material:
- 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-input-example.html from the linked StackBlitz and compare the disabled MatChipInput with the disabled MatInput. Verify the MatFormField wrapper behavior in both cases and confirm that the completed change makes the wrapper receive mat-form-field-disabled for a disabled chip input.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.