Angular mat-label disappears when mat-select form-field is on focus

Question

New to Angular and have been reading the Material documentation on mat-form-fields. I am having a weird bug happening when the form-field is focused. My mat-label disappears on focus and reappears once focus is lost.

This only appears to be happening in Chrome. Firefox and Edge do not have this bug

<mat-form-field>
    <mat-label>Days</mat-label>
    <mat-select value="{{pD.Days[0]}}" [(ngModel)]="pDSaveModel.Days" (ngModelChange)="saveModelChanged()">
        <mat-option *ngFor="let day of pD.Days" [value]="day">
            {{day}}
        </mat-option>
    </mat-select>
</mat-form-field>

Here is a screenshot of the form field out of focus

And here is the same field when focused

And here is the end result after losing focus

I have tried adding in placeholder="" to the mat-select, as well as trying different appearance options other than the default legacy. I have also tried using the floatLabel="always" property but with no luck. Any help is much appreciated !

johnnyjohnson johnnyjohnson · Accepted Answer · 2019-11-21T18:16:28

Changing the tags to something like a header tag ended up being a solution. I then just applied a simple class to make the font-weight normal.

Angular mat-label disappears when mat-select form-field is on focus

1 Answers