feat(autocomplete): support static placeholders

angular · Feb 23, 2017 · 82a670b · 82a670b
1 parent ca56ebb
commit 82a670b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 8 deletions.
diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html
@@ -6,7 +6,7 @@
     <div>Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
-    <md-input-container>
+    <md-input-container floatPlaceholder="never">
       <input mdInput placeholder="State" [mdAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
     </md-input-container>
 

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -25,7 +25,7 @@ import {Subject} from 'rxjs/Subject';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
-import {MdInputContainer, FloatPlaceholderType} from '../input/input-container';
+import {MdInputContainer} from '../input/input-container';
 
 /**
  * The following style constants are necessary to save here in order
@@ -81,6 +81,9 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
   /** Stream of blur events that should close the panel. */
   private _blurStream = new Subject<any>();
 
+  /** Whether or not the placeholder state is being overridden. */
+  private _manuallyFloatingPlaceholder = false;
+
   /** View -> model callback called when value changes */
   _onChange = (value: any) => {};
 
@@ -134,7 +137,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
     }
 
     this._panelOpen = true;
-    this._floatPlaceholder('always');
+    this._floatPlaceholder();
   }
 
   /** Closes the autocomplete suggestion panel. */
@@ -144,7 +147,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
     }
 
     this._panelOpen = false;
-    this._floatPlaceholder('auto');
+    this._resetPlaceholder();
   }
 
   /**
@@ -237,9 +240,18 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
    * 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;
+  private _floatPlaceholder(): void {
+    if (this._inputContainer && this._inputContainer.floatPlaceholder === 'auto') {
+      this._inputContainer.floatPlaceholder = 'always';
+      this._manuallyFloatingPlaceholder = true;
+    }
+  }
+
+  /** If the placeholder has been manually elevated, return it to its normal state. */
+  private _resetPlaceholder(): void  {
+    if (this._manuallyFloatingPlaceholder) {
+      this._inputContainer.floatPlaceholder = 'auto';
+      this._manuallyFloatingPlaceholder = false;
     }
   }
 

diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
@@ -219,6 +219,48 @@ describe('MdAutocomplete', () => {
           .toBe(false, `Expected panel state to stay closed.`);
     });
 
+   it('should not mess with placeholder placement if set to never', async(() => {
+      fixture.componentInstance.placeholder = 'never';
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+          .toEqual('never', 'Expected placeholder to stay static.');
+
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+
+        const options =
+            overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
+        options[1].click();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+            .toEqual('never', 'Expected placeholder to stay in static state after close.');
+      });
+    }));
+
+    it('should not mess with placeholder placement if set to always', async(() => {
+      fixture.componentInstance.placeholder = 'always';
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+          .toEqual('always', 'Expected placeholder to stay elevated on open.');
+
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+
+        const options =
+            overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
+        options[1].click();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+            .toEqual('always', 'Expected placeholder to stay elevated after close.');
+      });
+    }));
+
   });
 
   it('should have the correct text direction in RTL', () => {
@@ -822,7 +864,7 @@ describe('MdAutocomplete', () => {
 
 @Component({
   template: `
-    <md-input-container>
+    <md-input-container [floatPlaceholder]="placeholder">
       <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
     </md-input-container>
 
@@ -837,6 +879,7 @@ class SimpleAutocomplete implements OnDestroy {
   stateCtrl = new FormControl();
   filteredStates: any[];
   valueSub: Subscription;
+  placeholder = 'auto';
 
   @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
   @ViewChild(MdAutocomplete) panel: MdAutocomplete;