question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

feb-08-2018 22-43-04

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:18
  • Comments:17 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
cveronscommented, Jun 19, 2018

Hi @tinayuangao, @Splaktar,

This bug is still there in material@6.3.0.

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”.

5reactions
weberyouricommented, Nov 23, 2018

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Material mat-chips not setting to be removable
My problem is that when I am using Angular Material's mat-chip , it seems it cannot be set as removable even though I...
Read more >
Chips | Angular Material
Chips are always used inside a container. To create chips connected to an input field, start by creating a <mat-chip-grid> as the container....
Read more >
Overriding Angular Material Component Colors - Wildcard Corp.
Overriding Angular Material Component Colors. For cases where the default colors do not provide a complete solution. It's challenging to find resources that ......
Read more >
@abt-desk/realogy-mat-theme - npm
Click on the color field in the top right of the box on the left of the page. Replace the hex value in...
Read more >
Angular Material: How to Bind Chips to a Form Field
But hone in on the *ngFor line in the <mat-chip> element. That's referencing the array in the form field and not an array...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found