angular / angular/components

Chip color not applied when inside form-field

Open
#12,791 13 comments 4 reactions 1 assignee Claimed by @devversion View on GitHub
area: material/chips area: material/form-field P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
mat-chip should be the color ("primary", "accent", "warn") set in the color directive

#### What is the current behavior?
mat-chip is the default color

#### What are the steps to reproduce?
Providing a StackBlitz reproduction is the *best* way to share your issue.

EDIT: provided better steps to reproduce issue

1. Start with the Autocomplete example from https://material.angular.io/components/chips/overview
https://stackblitz.com/angular/rxlqaakgbdr?file=app%2Fchips-autocomplete-example.ts
2. Open file app/chips-autocomplete-example.html
3. Change line 4 from `[selectable]="selectable"` to `selectable="true"`
4. Insert above line 4 `color="primary"`
5. Insert below line 4 `selected="true"`

StackBlitz of steps taken: https://stackblitz.com/edit/angular-sqfif2?file=app/chips-autocomplete-example.html
This demonstrates that the chip is not getting color applied.

StackBiltz of formControl removed from `fruitInput`: https://angular-sqfif2-vmbpsj.stackblitz.io
Here the chip is getting color applied. This demonstrates the issue is somehow related to the formControl.

#### What is the use-case or motivation for changing an existing behavior?
I would like to have chips that fall under certain criteria to have the "warn" color.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Chrome 67, Angular 6.1, Material 6.4.6, TypeScript 2.9.2, MacOs High Sierra

#### Is there anything else we should know?
It looks like the issue is with the selected attribute. The chip isn't getting class mat-chip-selected

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.