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';
@@ -16,6 +16,7 @@ import {Dir} from '../core/rtl/dir';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
 import {keyAffectsActiveItem} from '../core/a11y/list-key-manager';
+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,12 +10,11 @@ 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;
   let dir: LayoutDirection;
-  let fixture: ComponentFixture<SimpleAutocomplete>;
-  let input: HTMLInputElement;
 
   beforeEach(async(() => {
     dir = 'ltr';
@@ -45,14 +44,17 @@ describe('MdAutocomplete', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SimpleAutocomplete);
-    fixture.detectChanges();
+  describe('panel toggling', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+    let input: HTMLInputElement;
 
-    input = fixture.debugElement.query(By.css('input')).nativeElement;
-  });
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
+    });
 
-  describe('panel toggling', () => {
     it('should open the panel when the input is focused', () => {
       expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
       dispatchEvent('focus', input);
@@ -171,23 +173,52 @@ 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');
 
   });
 
   describe('forms integration', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+    let input: HTMLInputElement;
+
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
+    });
 
     it('should fill the text field when an option is selected', () => {
       fixture.componentInstance.trigger.openPanel();
@@ -228,7 +259,19 @@ describe('MdAutocomplete', () => {
           .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
     });
 
+  });
+
   describe('aria', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+    let input: HTMLInputElement;
+
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
+    });
 
     it('should set role of input to combobox', () => {
       expect(input.getAttribute('role'))
@@ -307,10 +350,16 @@ describe('MdAutocomplete', () => {
   });
 
   describe('keyboard events', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+    let input: HTMLInputElement;
     let DOWN_ARROW_EVENT: KeyboardEvent;
     let ENTER_EVENT: KeyboardEvent;
 
     beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
       DOWN_ARROW_EVENT = new FakeKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
       ENTER_EVENT = new FakeKeyboardEvent(ENTER) as KeyboardEvent;
     });
@@ -462,9 +511,10 @@ describe('MdAutocomplete', () => {
       expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
 
       // These down arrows will set the 6th option active, below the fold.
-      [1,2,3,4, 5].forEach(() => {
+      [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)
@@ -474,6 +524,15 @@ describe('MdAutocomplete', () => {
   });
 
   describe('Fallback positions', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+    let input: HTMLInputElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
+    });
 
     it('should use below positioning by default', () => {
       fixture.componentInstance.trigger.openPanel();
@@ -532,6 +591,7 @@ class SimpleAutocomplete implements OnDestroy {
   valueSub: Subscription;
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
+  @ViewChild(MdInputContainer) inputContainer: MdInputContainer;
   @ViewChildren(MdOption) options: QueryList<MdOption>;
 
   states = [