refactor: switch back to showing hints when valid

src/lib/input/input-container.html

@@ -36,12 +36,13 @@
           [class.mat-warn]="dividerColor == 'warn'"></span>
   </div>
 
-  <div class="mat-input-hint-wrapper" [ngSwitch]="_getDisplayedMessages()">
+  <div class="mat-input-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">
     <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
       <ng-content select="md-error, mat-error"></ng-content>
     </div>
 
-    <div *ngSwitchCase="'hint'" [@transitionMessages]="_subscriptAnimationState">
+    <div class="mat-input-hint-wrapper" *ngSwitchCase="'hint'"
+      [@transitionMessages]="_subscriptAnimationState">
       <div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
       <ng-content select="md-hint, mat-hint"></ng-content>
     </div>

src/lib/input/input-container.scss

@@ -222,7 +222,7 @@ $mat-input-underline-disabled-background-image:
 
 // Wrapper for the hints and error messages. Provides positioning and text size.
 // Note that we're using `top` in order to allow for stacked children to flow downwards.
-.mat-input-hint-wrapper {
+.mat-input-subscript-wrapper {
   position: absolute;
   font-size: 75%;
   top: 100%;
@@ -231,6 +231,19 @@ $mat-input-underline-disabled-background-image:
   overflow: hidden; // prevents multi-line errors from overlapping the input
 }
 
+// Clears the floats on the hints. This is necessary for the hint animation to work.
+.mat-input-hint-wrapper {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
 // The hint is shown below the underline. There can be
 // more than one; one at the start and one at the end.
 .mat-hint {

src/lib/input/input-container.spec.ts

@@ -641,7 +641,7 @@ describe('MdInputContainer', function () {
       });
     }));
 
-    it('should hide the error messages once the input becomes valid', async(() => {
+    it('should hide the errors and show the hints once the input becomes valid', async(() => {
       testComponent.formControl.markAsTouched();
       fixture.detectChanges();
 
@@ -650,6 +650,8 @@ describe('MdInputContainer', function () {
             .toContain('mat-input-invalid', 'Expected container to have the invalid CSS class.');
         expect(containerEl.querySelectorAll('md-error').length)
             .toBe(1, 'Expected one error message to have been rendered.');
+        expect(containerEl.querySelectorAll('md-hint').length)
+            .toBe(0, 'Expected no hints to be shown.');
 
         testComponent.formControl.setValue('something');
         fixture.detectChanges();
@@ -659,39 +661,12 @@ describe('MdInputContainer', function () {
               'Expected container not to have the invalid class when valid.');
           expect(containerEl.querySelectorAll('md-error').length)
               .toBe(0, 'Expected no error messages when the input is valid.');
+          expect(containerEl.querySelectorAll('md-hint').length)
+              .toBe(1, 'Expected one hint to be shown once the input is valid.');
         });
       });
     }));
 
-    it('should hide the hints when there are errors and not show them again when' +
-      ' the input becomes valid', async(() => {
-
-        expect(containerEl.querySelectorAll('md-hint').length)
-            .toBe(1, 'Expected one hint to be shown on load.');
-        expect(containerEl.querySelectorAll('md-error').length)
-            .toBe(0, 'Expected no errors to be shown on load.');
-
-        testComponent.formControl.markAsTouched();
-        fixture.detectChanges();
-
-        fixture.whenStable().then(() => {
-          expect(containerEl.querySelectorAll('md-hint').length)
-              .toBe(0, 'Expected no hints to be shown after interaction.');
-          expect(containerEl.querySelectorAll('md-error').length)
-              .toBe(1, 'Expected one error to be shown after interaction.');
-
-          testComponent.formControl.setValue('something');
-          fixture.detectChanges();
-
-          fixture.whenStable().then(() => {
-            expect(containerEl.querySelectorAll('md-hint').length)
-                .toBe(0, 'Expected no hints to be shown after the value is set.');
-            expect(containerEl.querySelectorAll('md-error').length)
-                .toBe(0, 'Expected no errors to be shown after the value is set.');
-          });
-        });
-      }));
-
     it('should not hide the hint if there are no error messages', async(() => {
       testComponent.renderError = false;
       fixture.detectChanges();

src/lib/input/input-container.ts

@@ -369,18 +369,9 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit {
     return !!(isInvalid && (isTouched || isSubmitted));
   }
 
-  /** Determines whether to display hints, errors or no messages at all. */
-  _getDisplayedMessages(): 'error' | 'hint' | 'none' {
-    if (this._errorChildren.length > 0) {
-      if (this._isErrorState()) {
-        return 'error';
-      } else if (this._mdInputChild._ngControl) {
-        let control = this._mdInputChild._ngControl;
-        return (control.valid && control.touched) ? 'none' : 'hint';
-      }
-    }
-
-    return 'hint';
+  /** Determines whether to display hints or errors. */
+  _getDisplayedMessages(): 'error' | 'hint' {
+    return (this._errorChildren.length > 0 && this._isErrorState()) ? 'error' : 'hint';
   }
 
   /**