Components: 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))

[jelbourn]

I see- looks like a bug then.

[bryjohns]

Also, it looks like it's not just the chip being in the form field. The chip is not getting the selected attribute only if the form field contains an input field with a formControl.

Like this structure:

<mat-form-field>
  ...
  <mat-chip-list ...
  ...
  <input
    ...
    [formControl]="someFormControl"
    ...

[mischkl]

Ouch! This bug just bit us (we're using code from the autocomplete chiplist example), hope for a resolution ASAP!

[devversion]

I've looked into the issue and could reproduce it. The problem is that the MatAutocomplete trigger incorrectly always assumes that the parent MatFormField control is associated with the input that is connected to the autocomplete trigger.

https://github.com/angular/material2/blob/3cc9c679be322cdd13b4ac7cf650e3f4b10cf0e8/src/lib/autocomplete/autocomplete-trigger.ts#L531-L537

[razorch]

Any progress on the issue? I can reproduce it easily as well.

[tommyc38]

The issue seems to be relation to chip initialization. You can still toggle the colors on/off.

https://stackblitz.com/edit/angular-neubjp

[FireWall-e]

Here is slight improvement of tommyc38 workaround that will paint chip on initialization instead of selection:
<mat-chip #chipItem="matChip"
*ngFor="let chip of chips"
[color]="chipItem.selected ? 'accent' : chipItem.toggleSelected() && 'accent'"
>chip</mat-chip>

[meta72]

This is still an issue for me. In my example I don't even have an input, but a chips list with a formControl:
https://stackblitz.com/edit/angular-material-chips-list?file=src/app/app.component.html

[meta72]

Since I don't like having workarounds in the code without immediately knowing that it is a workaround, I created a directive with a variation of @FireWall-e's workaround:

import { Directive, OnInit, Input } from "@angular/core";
import { MatChip } from "@angular/material/chips";

@Directive({
    selector: "mat-chip[preselectWorkaround]"
})
export class PreselectWorkaroundDirective implements OnInit {

    @Input()
    preselectWorkaround: boolean | "" = true;

    constructor(
        private host: MatChip,
    ) { }

    public ngOnInit(): void {
        if (this.preselectWorkaround !== false) {
            setTimeout(() => this.host.select(), 0);
        }
    }
}

[meta72]

I worked some things out and extended my example above:

• preselected values do not work when
  
  
  
  • either the chips-list has a formControl
  
  
  • or there is an input with a formControl inside the chips-list
  
  
• fix this with
  
  
  
  • giving each chip a value and the chips-list a compareWith function
  
  
  • without a value on the chip, the logic compares the _value_ from the form control with the _content_ of the chip
  
  
  • the content may only contain text or icons, while the formControl value may be some object
  
  
  • comparing objects is most likely going to work if you compare some ID instead of the object reference
  
  
  • in addition you have to add a formControl to the chips-list if there is an input with a formControl
  
  

I traced the issue to the chips-list resetting itself when it detects an ngControl and setting its value from the control's value. So at first the chips were selected, then the chips-list reset itself, deselecting all chips, then it selected all chips by comparing them to the control's value, which in my case compared some string to an object, which always failed, resulting in all chips to remain deselected.

I guess the rule of thumb is: If there is one element using formControl of reactive forms, the whole form should be constructed with reactive forms instead of template driven.