mat-form-field floatLabel="never" not working

Question

For some reason using Angular 8 this parameter of never does not work for me on a mat-select.

<mat-form-field appearance="outline" floatLabel="never">
   <mat-label>Lesson</mat-label>
   <mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
   <mat-option value="T1">Lesson 1</mat-option>
   <mat-option value="T2">Lesson 2</mat-option>
   <mat-option value="T3">Lesson 3</mat-option>
   </mat-select>
</mat-form-field>

Always and Auto work, but never won't seem to make it go away.

Answer 1

TLDR:

Just remove the <mat-label> and use a placeholder on <mat-form-field> instead.

---

You can hide the floating label, you just have to approach the 'outline' variant differently. And there is absolutely no need to forcefully override the label via some weird css hack.
From the Angular Material docs:

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.

So it's actually the intended behavior for the 'outline' variant.

All you have to do is to just use the placeholder attribute on <mat-form-field> instead of adding a <mat-label>.

In your case:

<mat-form-field appearance="outline" floatLabel="never" placeholder="Lesson">
   <mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
      <mat-option value="T1">Lesson 1</mat-option>
      <mat-option value="T2">Lesson 2</mat-option>
      <mat-option value="T3">Lesson 3</mat-option>
   </mat-select>
</mat-form-field>

So basically people usually add a label they don't even want and need, only to look for css hacks to hide it...

Answer 2

try to use floatLabel="never" or floatLabel="always"