1

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?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.