fix(autocomplete): allow number zero as value (#5364)

* 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

src/lib/autocomplete/autocomplete-trigger.ts

@@ -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 : '';
   }
 
    /**

src/lib/autocomplete/autocomplete.spec.ts

@@ -53,6 +53,7 @@ describe('MdAutocomplete', () => {
         AutocompleteWithoutForms,
         NgIfAutocomplete,
         AutocompleteWithNgModel,
+        AutocompleteWithNumbers,
         AutocompleteWithOnPushDelay,
         AutocompleteWithNativeInput,
         AutocompleteWithoutPanel
@@ -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();
@@ -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,