Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(autocomplete): support static placeholders #3115

Merged
merged 1 commit into from
Feb 27, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/demo-app/autocomplete/autocomplete-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
24 changes: 18 additions & 6 deletions src/lib/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {};

Expand Down Expand Up @@ -134,7 +137,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
}

this._panelOpen = true;
this._floatPlaceholder('always');
this._floatPlaceholder();
}

/** Closes the autocomplete suggestion panel. */
Expand All @@ -144,7 +147,7 @@ export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAcce
}

this._panelOpen = false;
this._floatPlaceholder('auto');
this._resetPlaceholder();
}

/**
Expand Down Expand Up @@ -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;
}
}

Expand Down
45 changes: 44 additions & 1 deletion src/lib/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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>

Expand All @@ -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;
Expand Down