angular / angular/components

bug(mat-chip): mat-chip does not react to [selected] binding when the mat-chip-list also contains a formControl (e.g.) official autocomplete example

未关闭
#21,999 5 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
area: material/autocomplete area: material/chips P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Reproduction

This example is copied directly from the official "Chips Autocomplete" example ([https://material.angular.io/components/chips/examples]). I have just stripped some of the unnecessary bits for a minimal example.

The example shows 3 copies of same mat-chip-list showing how mat-chips do not react to [selected] binding when a mat-input with either [formControl] or [matAutocomplete] bindings are included in the mat-chip-list.

All the existing chips should be selected in all copies. The only difference between the 3 is what bindings are included in the

https://components-issue-y2hda6.stackblitz.io

Steps to reproduce:
1. Create a mat-chip-list with mat-chips that have a [selected] binding (or just static flag set)
2. Add a with either [matAutocomplete] or [formControl]
3. The mat-chips no longer reflect their "selected" css styles (although appear to be internally in selected state)

#### Expected Behavior

For all chips to be selected in all copies

#### Actual Behavior

Presence of [formControl] or [matAutocomplete] prevents css styles being applied to selected chips

#### Environment

- Angular: 11.1.1
- All OS/Browser

贡献指南

打开贡献指南

调研方向

从链接的 StackBlitz 复现开始,并将其与官方的 Chips Autocomplete 示例进行比较。检查输入使用 [formControl] 或 [matAutocomplete] 时 mat-chip-list 和 mat-chip 的行为。在全部三个复现案例中,现有 chips 应用其选中状态的 CSS 样式即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。