diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html index 16e4e1a95bf4..6036bdb6adb3 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;