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

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?