fix(forms): update accessor value when native select value changes

Closes #8710
angular · May 25, 2016 · 7a2ce7f · 7a2ce7f
1 parent 1ac38bd
commit 7a2ce7f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts b/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
@@ -68,7 +68,10 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
   }
 
   registerOnChange(fn: (value: any) => any): void {
-    this.onChange = (valueString: string) => { fn(this._getOptionValue(valueString)); };
+    this.onChange = (valueString: string) => {
+      this.value = valueString;
+      fn(this._getOptionValue(valueString));
+    };
   }
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }
 

diff --git a/modules/@angular/common/test/forms/integration_spec.ts b/modules/@angular/common/test/forms/integration_spec.ts
@@ -585,7 +585,7 @@ export function main() {
                         });
                   }));
 
-        it("when new options are added",
+        it("when new options are added (selection through the model)",
            inject([TestComponentBuilder, AsyncTestCompleter],
                   (tcb: TestComponentBuilder, async) => {
                     var t = `<div>
@@ -615,6 +615,39 @@ export function main() {
                         });
                   }));
 
+        it("when new options are added (selection through the UI)",
+            inject([TestComponentBuilder, AsyncTestCompleter],
+                (tcb: TestComponentBuilder, async) => {
+                  var t = `<div>
+                      <select [(ngModel)]="selectedCity">
+                        <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
+                      </select>
+                  </div>`;
+
+                  tcb.overrideTemplate(MyComp8, t)
+                      .createAsync(MyComp8)
+                      .then((fixture) => {
+
+                        var testComp: MyComp8 = fixture.debugElement.componentInstance;
+                        testComp.list = [{"name": "SF"}, {"name": "NYC"}];
+                        testComp.selectedCity = testComp.list[0];
+                        fixture.detectChanges();
+
+                        var select = fixture.debugElement.query(By.css("select"));
+                        var ny = fixture.debugElement.queryAll(By.css("option"))[1];
+
+                        select.nativeElement.value = "1: Object";
+                        dispatchEvent(select.nativeElement, "change");
+                        testComp.list.push({"name": "Buffalo"});
+                        fixture.detectChanges();
+
+                        expect(select.nativeElement.value).toEqual("1: Object");
+                        expect(ny.nativeElement.selected).toBe(true);
+                        async.done();
+                      });
+                }));
+
+
         it("when options are removed",
            inject([TestComponentBuilder, AsyncTestCompleter],
                   (tcb: TestComponentBuilder, async) => {