Chip color not applied when inside form-field

[bryjohns]

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

[jelbourn]

Currently the chips are only colored when they're marked as selected.

[bryjohns]

@jelbourn
Hey Jeremy. The chips in the example were marked selected and still weren't getting color.
https://stackblitz.com/edit/angular-sqfif2?file=app/chips-autocomplete-example.html

[bryjohns]

@jelbourn
Here is another example of the demo working properly by triggering a late model change.

https://angular-sqfif2-pye5be.stackblitz.io

I added the following to the constructor for chips-autocomplete-example.ts and it works as expected.

        window.setTimeout(function() {
          var tmp = this.fruits.slice(0);
          this.fruits = [];
          window.setTimeout(function() {
            this.fruits = tmp;
          }.bind(this))
        }.bind(this))