Skip to content

Commit

Permalink
fix(autocomplete): allow number zero as value (#5364)
Browse files Browse the repository at this point in the history
* fix(autocomplete): allow number zero as value

* Currently the autocomplete does not properly display the selected options with the number zero as value.

Fixes #5363.

* Fix typo
  • Loading branch information
devversion authored and tinayuangao committed Jun 28, 2017
1 parent d3af57d commit 9137fd9
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 1 deletion.
4 changes: 3 additions & 1 deletion src/lib/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,9 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {

private _setTriggerValue(value: any): void {
const toDisplay = this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
this._element.nativeElement.value = toDisplay || '';
// Simply falling back to an empty string if the display value is falsy does not work properly.
// The display value can also be the number zero and shouldn't fall back to an empty string.
this._element.nativeElement.value = toDisplay != null ? toDisplay : '';
}

/**
Expand Down
31 changes: 31 additions & 0 deletions src/lib/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ describe('MdAutocomplete', () => {
AutocompleteWithoutForms,
NgIfAutocomplete,
AutocompleteWithNgModel,
AutocompleteWithNumbers,
AutocompleteWithOnPushDelay,
AutocompleteWithNativeInput,
AutocompleteWithoutPanel
Expand Down Expand Up @@ -1194,6 +1195,19 @@ describe('MdAutocomplete', () => {
});
}));

it('should display the number when the selected option is the number zero', async(() => {
const fixture = TestBed.createComponent(AutocompleteWithNumbers);

fixture.componentInstance.selectedNumber = 0;
fixture.detectChanges();

fixture.whenStable().then(() => {
const input = fixture.debugElement.query(By.css('input')).nativeElement;

expect(input.value).toBe('0');
});
}));

it('should work when input is wrapped in ngIf', async(() => {
const fixture = TestBed.createComponent(NgIfAutocomplete);
fixture.detectChanges();
Expand Down Expand Up @@ -1462,6 +1476,23 @@ class AutocompleteWithNgModel {

}

@Component({
template: `
<md-input-container>
<input mdInput placeholder="Number" [mdAutocomplete]="auto" [(ngModel)]="selectedNumber">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let number of numbers" [value]="number">
<span>{{ number }}</span>
</md-option>
</md-autocomplete>
`
})
class AutocompleteWithNumbers {
selectedNumber: number;
numbers = [0, 1, 2];
}

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
Expand Down

0 comments on commit 9137fd9

Please sign in to comment.