diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html
index 1124b22a5e2f..8afc73b83eb3 100644
--- a/src/demo-app/autocomplete/autocomplete-demo.html
+++ b/src/demo-app/autocomplete/autocomplete-demo.html
@@ -6,7 +6,7 @@
Reactive value: {{ stateCtrl.value | json }}
Reactive dirty: {{ stateCtrl.dirty }}
-
+
diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 2368cdcd1e01..e11e0a65ba18 100644
--- 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();
+ /** 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
index 5baee70ad18e..9bc1a19896cc 100644
--- 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;
+ 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;
+ 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: `
-
+
@@ -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;