mat-select with appearance="outline" doesn't float placeholder

[JeremyBratzel]

when mat-form-field with a mat-select inside has appearance="outline" it doesn't float the placeholder when focused or with an option selected.

Take a look at this example https://stackblitz.com/edit/angular-3pubot

[josephperrott]

Per our docs:

The second important difference is that the standard, fill, and outline appearances do not promote placeholders to labels. For the legacy appearance specifying will result in a floating label being added to the mat-form-field. For the newer variants it will just add a normal placeholder to the input. If you want a floating label, add a to the mat-form-field.

Instead of

<mat-form-field appearance="outline">
  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
...

it should be

<mat-form-field appearance="outline">
  <mat-label>Favorite animal</mat-label>
  <mat-select [formControl]="animalControl" required>
...

[andreElrico]

I had the same problem today. I switched to "outline" after writing 100k of inputs.

Here is a regex I have come up with to help with the transition

pattern: (?<!<[/]mat-label>\s+)<input matInput placeholder="([^"]+)"
sub:      <mat-label>$1</mat-label>\n<input matInput

I post this in hope it helps you. Please use at your own risk,

[brankoiliccc]

@andreElrico This looks promising. Can you please provide code snipped or example that shows how is this used. Where should we inject this pattern?
Thanks

[Splaktar]

@andreElrico @brankoiliccc Please submit Angular Material and CDK questions here and issues here. This repo is for docs infrastructure.