fix(select): unable to programmatically select falsy values

Fixes not being able to set falsy values progammatically in `md-select`. Fixes angular#4854.
crisbeto · May 29, 2017 · 99ecc03 · 99ecc03
1 parent 12d6e96
commit 99ecc03
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -56,7 +56,8 @@ describe('MdSelect', () => {
         BasicSelectInitiallyHidden,
         BasicSelectNoPlaceholder,
         BasicSelectWithTheming,
-        ResetValuesSelect
+        ResetValuesSelect,
+        FalsyValueSelect
       ],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
@@ -449,6 +450,22 @@ describe('MdSelect', () => {
       expect(fixture.componentInstance.select.selected).not.toBeDefined();
     });
 
+    it('should be able to programmatically select a falsy option', () => {
+      fixture.destroy();
+
+      let falsyFixture = TestBed.createComponent(FalsyValueSelect);
+
+      falsyFixture.detectChanges();
+      falsyFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+      falsyFixture.componentInstance.control.setValue(0);
+      falsyFixture.detectChanges();
+
+      expect(falsyFixture.componentInstance.options.first.selected)
+        .toBe(true, 'Expected first option to be selected');
+      expect(overlayContainerElement.querySelectorAll('md-option')[0].classList)
+        .toContain('mat-selected', 'Expected first option to be selected');
+    });
+
   });
 
   describe('forms integration', () => {
@@ -2504,3 +2521,20 @@ class ResetValuesSelect {
 
   @ViewChild(MdSelect) select: MdSelect;
 }
+
+
+@Component({
+  template: `
+    <md-select [formControl]="control">
+      <md-option *ngFor="let food of foods" [value]="food.value">{{ food.viewValue }}</md-option>
+    </md-select>
+  `
+})
+class FalsyValueSelect {
+  foods: any[] = [
+    { value: 0, viewValue: 'Steak' },
+    { value: 1, viewValue: 'Pizza' },
+  ];
+  control = new FormControl();
+  @ViewChildren(MdOption) options: QueryList<MdOption>;
+}
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -579,7 +579,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
    */
   private _selectValue(value: any): MdOption {
     let optionsArray = this.options.toArray();
-    let correspondingOption = optionsArray.find(option => option.value && option.value === value);
+    let correspondingOption = optionsArray.find(option => {
+      return option.value != null && option.value === value;
+    });
 
     if (correspondingOption) {
       correspondingOption.select();