I have a strange behavior with a simple mat-select
.
<mat-select [compareWith]="compareFn" placeholder="Options"
formControlName="options" multiple>
<mat-option *ngFor="let option of options" [value]="option">
{{option.description}}
</mat-option>
</mat-select>
compareFn(c1: OptionModel, c2: string): boolean {
return c1 && c2 ? c1.id === c2 : false;
}
Code works. If you open the select, check options, reload the page, all works as expected...
BUT
The first time the component has been shown the mat-select
shows the default placeholder string instead of selected options. If you move the mouse over any component buttons it magically calls compareWith
function and then values appears.
It seems the mouseover
event awakens mat-select compareWith
but I cannot understand why!
Have someone faced the same strange effect?