angular / angular/components

bug(MatChipList): chip list disabled should respect each chip item disabled state

Open
#27,971 3 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

Chiplist [disabled] toggling from disable to enable doesn't respect each chip item [disabled] state. Chip items, which are actually disabled become visually enabled.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/vdefsz?file=src%2Fexample%2Fchips-input-example.html,src%2Fexample%2Fchips-input-example.ts

Steps to reproduce:
1. The chip item is disabled and has properly disabled styles in initialization
![2023-10-20_15h12_54](https://github.com/angular/components/assets/12629525/a8ca53f3-a9ee-44a7-8e4b-f8f20f74b469)
2. Click 'Disable chiplist'
3. Click 'Enable chiplist'

### Expected Behavior

The chip item is visually disabled

### Actual Behavior

The chip item ignores its disabled state and looks like enabled

### Environment

- Angular: 16.2.9
- CDK/Material: 16.2.9
- Browser(s): Google Chrome, Version 118.0.5993.88 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Contributor guide

Open the contributing guide

Research direction

Use the linked StackBlitz reproduction and start with src/example/chips-input-example.html and src/example/chips-input-example.ts. Reproduce the disable/enable sequence, then trace the MatChipList state handling; done means individually disabled chips retain their disabled appearance after the chip list is re-enabled.

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.