From 602a861621b2bcdb79f4e87bd8167e8c87aee307 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 21 Sep 2017 01:06:08 +0200
Subject: [PATCH] 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
---
 src/lib/form-field/_form-field-theme.scss | 4 ++--
 src/lib/form-field/form-field.scss        | 2 +-
 src/lib/input/input.ts                    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/form-field/_form-field-theme.scss b/src/lib/form-field/_form-field-theme.scss
index 6c3be808cdf..9576bfa0e29 100644
--- a/src/lib/form-field/_form-field-theme.scss
+++ b/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);
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss
index 15694919e78..449f60ecb7d 100644
--- a/src/lib/form-field/form-field.scss
+++ b/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 {
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index c3a3c72f3d0..6f02784aee0 100644
--- a/src/lib/input/input.ts
+++ b/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',