fix(autocomplete): placeholder should float while panel is open

Author: kara

src/lib/autocomplete/autocomplete-trigger.ts

@@ -1,5 +1,5 @@
 import {
-    AfterContentInit, Directive, ElementRef, Input, ViewContainerRef, Optional, OnDestroy
+    AfterContentInit, Directive, ElementRef, Host, Input, ViewContainerRef, Optional, OnDestroy
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
 import {Overlay, OverlayRef, OverlayState, TemplatePortal} from '../core';
@@ -15,6 +15,7 @@ import 'rxjs/add/observable/merge';
 import {Dir} from '../core/rtl/dir';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
+import {MdInputContainer, FloatPlaceholderType} from '../input/input-container';
 
 /**
  * The following style constants are necessary to save here in order
@@ -59,7 +60,8 @@ export class MdAutocompleteTrigger implements AfterContentInit, OnDestroy {
 
   constructor(private _element: ElementRef, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
-              @Optional() private _controlDir: NgControl, @Optional() private _dir: Dir) {}
+              @Optional() private _controlDir: NgControl, @Optional() private _dir: Dir,
+              @Optional() @Host() private _inputContainer: MdInputContainer) {}
 
   ngAfterContentInit() {
     this._keyManager = new ActiveDescendantKeyManager(this.autocomplete.options);
@@ -90,6 +92,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, OnDestroy {
     }
 
     this._panelOpen = true;
+    this._floatPlaceholder('always');
   }
 
   /** Closes the autocomplete suggestion panel. */
@@ -99,6 +102,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, OnDestroy {
     }
 
     this._panelOpen = false;
+    this._floatPlaceholder('auto');
   }
 
   /**
@@ -135,6 +139,17 @@ export class MdAutocompleteTrigger implements AfterContentInit, OnDestroy {
     }
   }
 
+  /**
+   * In "auto" mode, the placeholder will animate down as soon as focus is lost.
+   * This causes the value to jump when selecting an option with the mouse.
+   * This method manually floats the placeholder until the panel can be closed.
+   */
+  private _floatPlaceholder(state: FloatPlaceholderType): void {
+    if (this._inputContainer) {
+      this._inputContainer.floatPlaceholder = state;
+    }
+  }
+
   /**
    * Given that we are not actually focusing active options, we must manually adjust scroll
    * to reveal options below the fold. First, we find the offset of the option from the top

src/lib/autocomplete/autocomplete.spec.ts

@@ -10,6 +10,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {ENTER, DOWN_ARROW, SPACE} from '../core/keyboard/keycodes';
 import {MdOption} from '../core/option/option';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
+import {MdInputContainer} from '../input/input-container';
 
 describe('MdAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
@@ -172,16 +173,35 @@ describe('MdAutocomplete', () => {
       });
     }));
 
+    it('should keep the label floating until the panel closes', () => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      dispatchEvent('blur', input);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+          .toEqual('always', 'Expected placeholder to keep floating on blur.');
+
+      const backdrop =
+          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      backdrop.click();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+          .toEqual('auto', 'Expected placeholder to return to auto state after panel closes.');
+    });
+
   });
 
   it('should have the correct text direction in RTL', () => {
     dir = 'rtl';
 
-    const fixture = TestBed.createComponent(SimpleAutocomplete);
-    fixture.detectChanges();
+    const rtlFixture = TestBed.createComponent(SimpleAutocomplete);
+    rtlFixture.detectChanges();
 
-    fixture.componentInstance.trigger.openPanel();
-    fixture.detectChanges();
+    rtlFixture.componentInstance.trigger.openPanel();
+    rtlFixture.detectChanges();
 
     const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
     expect(overlayPane.getAttribute('dir')).toEqual('rtl');
@@ -405,6 +425,7 @@ describe('MdAutocomplete', () => {
       [1, 2, 3, 4, 5].forEach(() => {
         fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
       });
+
       fixture.detectChanges();
 
       // Expect option bottom minus the panel height (288 - 256 = 32)
@@ -595,6 +616,7 @@ class SimpleAutocomplete implements OnDestroy {
   valueSub: Subscription;
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
+  @ViewChild(MdInputContainer) inputContainer: MdInputContainer;
   @ViewChildren(MdOption) options: QueryList<MdOption>;
 
   states = [