Components: bug: mat-chip color is not working properly within mat-chip-list & mat-form-field

[AnthonyNahas]

Scenario

I have a simple input field that have an async autocomplete feature in order to add an email of a set of users. The added email will be illustrated in form of mat-chip within a mat-chip-list.

Bug

I have in my template an mat-form-field element that conatins a mat-chip-list element.
Within the mat-chip-list element i have also nested elements including the mat-chip element and an input as well as an mat-autocomplete element.

The color input of mat-chip is eql "accent", however the color is correct if i add an element to the list using the matChipInputTokenEnd event. Else, all chip's color are reset to the default one, e.g: if I add an item to the mat-chip-list using the auto complete feature...
This is very strange and therefore i provide the code and a gif below.
PS: selected input is eql true.

To confirm that the mat-chip works normally without the combination explained above,
i added a stand alone mat-chip (primary color - indigo) above the mat-chip-list and this works as expected. Furthermore, i added a static mat-chip ("testing") within the mat-chip-list with an accent color. This is not working too!

What is the expected behavior?

all chips should be with the color entered --> "accent" !!!

What is the current behavior?

What are the steps to reproduce?

<mat-card-content>
                <mat-chip color="primary" selected="true">testing</mat-chip>
                <mat-form-field>
                    <mat-chip-list #chipList1 selectable="true">
                        <mat-chip color="accent" selected="true">
                            testing
                        </mat-chip>
                        <mat-chip *ngFor="let email of userEmails"
                                  color="accent"
                                  selected="true"
                                  selectable="true"
                                  removable="true"
                                  (remove)="remove(email)">
                            {{email}}
                            <mat-icon matChipRemove>cancel</mat-icon>
                        </mat-chip>
                        <input matInput
                               #emailsInput
                               type="text"
                               [(ngModel)]="searchValue"
                               [formControl]="emailFormControl"
                               [matAutocomplete]="reactiveAuto"
                               placeholder="Emails hier eingeben..."
                               [matChipInputFor]="chipList1"
                               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                               matChipInputAddOnBlur="false"
                               (matChipInputTokenEnd)="add($event)"
                               (keyup)="searchUsers()">
                        <mat-autocomplete #reactiveAuto="matAutocomplete"
                                          [displayWith]="displayFn"
                                          (optionSelected)="test($event)">
                            <mat-option *ngFor="let user of usersFound | async" [value]="user.email">
                                <span>{{ user.email }}</span>
                                <span class="demo-secondary-text"> ({{user.displayName}}) </span>
                            </mat-option>
                        </mat-autocomplete>
                        <mat-error *ngIf="emailFormControl.hasError('pattern')">
                            Bitte geben Sie eine gültige E-Mail-Adresse ein
                        </mat-error>
                    </mat-chip-list>
                </mat-form-field>
            </mat-card-content>

....
    @ViewChild('emailsInput') emailsInputElement: ElementRef;

    public add(event: MatChipInputEvent): void {
        const input = event.input;
        const value = event.value;

        // Add an email
        if ((value || '').trim() && this.validateEmail(value)) {
            this.userEmails.push(value.trim());
            this.emailsInputElement.nativeElement.value = '';
        }
    }

    public test($event: MatAutocompleteSelectedEvent) {
        console.log('on optionSelected: ', $event.option.value);
        this.userEmails.push($event.option.value.trim());
        this.searchValue = '';
        this.emailsInputElement.nativeElement.value = '';
        console.log('emails array: ', this.userEmails);
    }

    public remove(email: any): void {
        const index = this.userEmails.indexOf(email);

        if (index >= 0) {
            this.userEmails.splice(index, 1);
        }
    }

}

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular v5.2.3
• Material v5.1.0
• OS: MacOS high Sierra
• TS v2.4.2
• Browsers: tested on chrome and firefox (not working!)

Is there anything else we should know?

[tinayuangao]

@AnthonyNahas Could you please provide a StackBlitz reproduction? Thanks

[AnthonyNahas]

@tinayuangao Sorry for the late reply... I am gonna provide a stackblitz as soon as I can... thank you

[xalhera]

Hi @tinayuangao, @Splaktar,

This bug is still there in [email protected].

Here is an example on stackblitz

As soon as you select an item in the autocomplete widget the chips will lose their color.
It looks like the selected state of the chips is reset to "false".

[bhuber2010]

Just ran into this also, would be great to figure out a fix or workaround soon.

[bhuber2010]

@Splaktar what's our outlook on this? This is starting to become a big issue on my project.

[sharath1608]

Would love to hear the progress on this. Any workarounds ?

[circleart]

It would be nice if this topic could get more attention.
This bug is still there in [email protected]

[Exocomp]

I ran into the same thing in version 7. It appears what is missing with respect to css is the following class:

.mat-chip-selected {
    background-color: #346cb0;
    color: white;
}

I could not find a decent way to add that class once a chip is added.

My only work around was to use ngStyle in mat-chip and set the background-color and color. Hope it helps someone until this is fixed.

[weberyouri]

Simply add the class to the mat-chip.

<mat-chip *ngFor="let cat of job.categories" class="mat-chip-category">

Then add the class to your _.scss_ file and reference to the accent color of your theme.

.mat-chip-category { background-color: mat-color($accent) !important; }

Hopefully i can help someone!

[ShadabFaiz]

Simply add the class to the mat-chip.

<mat-chip *ngFor="let cat of job.categories" class="mat-chip-category">

Then add the class to your _.scss_ file and reference to the accent color of your theme.

.mat-chip-category { background-color: mat-color($accent) !important; }

Hopefully i can help someone!

Although it works, it would be better if we are able to do so without !important

[subotin94]

SImply replace selected="true" with just selected. Should fix your problem.

[thematho]

SImply replace selected="true" with just selected. Should fix your problem.

It doesn't work when you have a conditional attribute, Example:
https://stackblitz.com/edit/chiplist-autocomplete-c4vofj?file=src%2Fapp%2Fapp.component.html
Try to select other chips and you will see the selected attribute not being considered even if they are present on the HTML

[Komald]

Any update here?

[vlio20]

it seems like the issue occurs when the chip is not selected, if you will add selected="true" attribute to your chip it will take the color into consideration. It seems like the issue is a css issue (to be more specific - the issue is with the class selector).

Here is the line:
https://github.com/angular/components/blob/e7508adfbf0caaa11d2a18b2ba6fe3040a4a720d/src/material/chips/_chips-theme.scss#L73

  .mat-chip.mat-standard-chip.mat-chip-selected {  //<--- this one
    &.mat-primary {
      @include mat-chips-theme-color($primary);
    }

    &.mat-warn {
      @include mat-chips-theme-color($warn);
    }

    &.mat-accent {
      @include mat-chips-theme-color($accent);
    }
  }

I think that the intention was to show the color only upon selection. Not sure if this is a bug. If so it will require to add a new Input to indicate showing the color without the chip being selected.

I will work on a PR.

[bretbas]

I have the same problem.
The chips are cities in my app and I have an active city in the code behind.
The active city change programatically. I want that selected chip changed own color when active city was changed.
I thought that this is help for me: <mat-chip [selected]="activeCity == city"> where city is current context of the mat-chip.
But it did not help.

I found solution of this:
<mat-chip #chip="matChip" [selected]="activeCity == city" (selectionChange)="activeCity == city ? chip.select() : chip.deselect()"> where city is also a context of the mat-chip