bug: mat-chip color is not working properly within mat-chip-list & mat-form-field
See original GitHub issueScenario
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?
Issue Analytics
- State:
- Created 6 years ago
- Reactions:18
- Comments:17 (1 by maintainers)
Top GitHub Comments
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”.
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!