fix(form-field): placeholder not floating if autofilled (#6839)

If a form-field value is set through autofill, the floating placeholder should float and not overlay the form-field value. This doesn't work in Chrome because the `.mat-form-field-autofill-float` class doesn't exist and can't be set on the form-field control anyway.

Fixes #6837

Author: devversion

src/lib/form-field/_form-field-theme.scss

@@ -49,7 +49,7 @@
     }
   }
 
-  .mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder,
+  .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder,
   .mat-focused .mat-form-field-placeholder.mat-form-field-float {
     .mat-form-field-required-marker {
       color: $required-placeholder-color;
@@ -184,7 +184,7 @@
     border-top: $infix-margin-top solid transparent;
   }
 
-  .mat-form-field-autofill-float {
+  .mat-form-field-autofill-control {
     &:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float {
       @include _mat-form-field-placeholder-floating(
           $subscript-font-scale, $infix-padding, $infix-margin-top);

src/lib/form-field/form-field.scss

@@ -65,7 +65,7 @@ $mat-form-field-underline-height: 1px !default;
 // This is necessary because these browsers do not actually fire any events when a form auto-fill is
 // occurring. Once the autofill is committed, a change event happen and the regular md-form-field
 // classes take over to fulfill this behaviour. Assumes the autofill is non-empty.
-.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper {
+.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper {
   // The control is still technically empty at this point, so we need to hide non-floating
   // placeholders to prevent overlapping with the autofilled value.
   .mat-form-field-placeholder {

src/lib/input/input.ts

@@ -52,7 +52,7 @@ let nextUniqueId = 0;
 @Directive({
   selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
   host: {
-    'class': 'mat-input-element',
+    'class': 'mat-input-element mat-form-field-autofill-control',
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.
     '[id]': 'id',