separate the "floating" logic from the "empty" logic

Author: mmalerba

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

@@ -14,7 +14,7 @@
 
   // Placeholder colors. Required is used for the `*` star shown in the placeholder.
   $placeholder-color: mat-color($foreground, secondary-text);
-  $floating-placeholder-color: mat-color($primary);
+  $focused-placeholder-color: mat-color($primary);
   $required-placeholder-color: mat-color($accent);
 
   // Underline colors.
@@ -32,7 +32,7 @@
   }
 
   .mat-focused .mat-form-field-placeholder {
-    color: $floating-placeholder-color;
+    color: $focused-placeholder-color;
 
     &.mat-accent {
       color: $underline-color-accent;
@@ -42,12 +42,9 @@
       color: $underline-color-warn;
     }
   }
-
-  .mat-form-field-autofill-float:-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;
-    }
+  
+  .mat-focused .mat-form-field-required-marker {
+    color: $required-placeholder-color;
   }
 
   .mat-form-field-underline {
@@ -78,7 +75,7 @@
       color: $underline-color-warn;
 
       &.mat-accent,
-      &.mat-form-field-float .mat-form-field-required-marker {
+      .mat-form-field-required-marker {
         color: $underline-color-warn;
       }
     }
@@ -178,8 +175,10 @@
     border-top: $infix-margin-top solid transparent;
   }
 
-  .mat-form-field-autofill-float {
-    &:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float {
+  .mat-form-field-can-float {
+    &.mat-form-field-should-float .mat-form-field-placeholder,
+    .mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper
+        .mat-form-field-placeholder {
       @include _mat-form-field-placeholder-floating(
           $subscript-font-scale, $infix-padding, $infix-margin-top);
     }
@@ -192,13 +191,6 @@
 
   .mat-form-field-placeholder {
     top: $infix-margin-top + $infix-padding;
-
-    // Show the placeholder above the control when it's not empty, or focused.
-    &.mat-form-field-float:not(.mat-form-field-empty),
-    .mat-focused &.mat-form-field-float {
-      @include _mat-form-field-placeholder-floating($subscript-font-scale,
-          $infix-padding, $infix-margin-top);
-    }
   }
 
   .mat-form-field-underline {

src/lib/form-field/form-field-control.ts

@@ -36,6 +36,9 @@ export abstract class MdFormFieldControl<T> {
   /** Whether the control is empty. */
   readonly empty: boolean;
 
+  /** Whether the `MdFormField` label should try to float. */
+  readonly shouldPlaceholderFloat: boolean;
+
   /** Whether the control is required. */
   readonly required: boolean;
 

src/lib/form-field/form-field.html

@@ -12,8 +12,6 @@
                [attr.for]="_control.id"
                [class.mat-empty]="_control.empty && !_shouldAlwaysFloat"
                [class.mat-form-field-empty]="_control.empty && !_shouldAlwaysFloat"
-               [class.mat-float]="_canPlaceholderFloat"
-               [class.mat-form-field-float]="_canPlaceholderFloat"
                [class.mat-accent]="color == 'accent'"
                [class.mat-warn]="color == 'warn'"
                *ngIf="_hasPlaceholder()">

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

@@ -63,23 +63,6 @@ $mat-form-field-underline-height: 1px !default;
   min-width: 0;
 }
 
-// Pseudo-class for Chrome and Safari auto-fill to move the placeholder to the floating position.
-// 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 {
-  // 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 {
-    display: none;
-  }
-
-  .mat-form-field-float {
-    display: block;
-    transition: none;
-  }
-}
-
 // Used to hide the placeholder overflow on IE, since IE doesn't take transform into account when
 // determining overflow.
 .mat-form-field-placeholder-wrapper {
@@ -122,19 +105,35 @@ $mat-form-field-underline-height: 1px !default;
   // Hide the placeholder initially, and only show it when it's floating or the control is empty.
   display: none;
 
-  &.mat-form-field-empty,
-  &.mat-form-field-float:not(.mat-form-field-empty),
-  .mat-focused &.mat-form-field-float {
-    display: block;
-  }
-
   [dir='rtl'] & {
     transform-origin: 100% 0;
     left: auto;
     right: 0;
   }
 }
 
+.mat-form-field-empty.mat-form-field-placeholder,
+.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {
+  display: block;
+}
+
+// Pseudo-class for Chrome and Safari auto-fill to move the placeholder to the floating position.
+// 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.
+.mat-form-field-autofill-float:-webkit-autofill + .mat-form-field-placeholder-wrapper
+    .mat-form-field-placeholder {
+  // The form field will be considered empty if it is autofilled, and therefore the placeholder will
+  // be shown. Therefore we need to override it to hidden...
+  display: none;
+
+  // ...and re-show it only if it's able to float.
+  .mat-form-field-can-float & {
+    display: block;
+    transition: none;
+  }
+}
+
 // Disable the placeholder animation when the control is not empty (this prevents placeholder
 // animating up when the value is set programmatically).
 .mat-form-field-placeholder:not(.mat-form-field-empty) {

src/lib/form-field/form-field.ts

@@ -71,6 +71,8 @@ let nextUniqueId = 0;
     'class': 'mat-input-container mat-form-field',
     '[class.mat-input-invalid]': '_control.errorState',
     '[class.mat-form-field-invalid]': '_control.errorState',
+    '[class.mat-form-field-can-float]': '_canPlaceholderFloat',
+    '[class.mat-form-field-should-float]': '_control.shouldPlaceholderFloat || _shouldAlwaysFloat',
     '[class.mat-focused]': '_control.focused',
     '[class.mat-primary]': 'color == "primary"',
     '[class.mat-accent]': 'color == "accent"',

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-float',
     // 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.
     '[attr.id]': 'id',
@@ -280,6 +280,9 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
         !this._isBadInput();
   }
 
+  // Implemented as part of MdFormFieldControl.
+  get shouldPlaceholderFloat(): boolean { return this.focused || !this.empty; }
+
   // Implemented as part of MdFormFieldControl.
   setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); }
 

src/lib/select/select.ts

@@ -1170,6 +1170,9 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     this.focus();
     this.open();
   }
+
+  // Implemented as part of MdFormFieldControl.
+  get shouldPlaceholderFloat() { return !this.empty; }
 }
 
 /** Clamps a value n between min and max values. */