fix(forms): ensure select model updates in firefox and ie

kara · kara · commit c3daccd83b86 · 2016-04-22T21:23:20.000Z
Closes angular#6573 Closes angular#8148
diff --git a/modules/angular2/src/common/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/common/forms/directives/select_control_value_accessor.ts
@@ -36,10 +36,16 @@ function _extractId(valueString: string): string {
 
 /**
  * The accessor for writing a value and listening to changes on a select element.
+ *
+ * Note: We have to listen to the 'change' event because 'input' events aren't fired
+ * for selects in Firefox and IE:
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
+ * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
+ *
  */
 @Directive({
   selector: 'select[ngControl],select[ngFormControl],select[ngModel]',
-  host: {'(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
+  host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   providers: [SELECT_VALUE_ACCESSOR]
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
diff --git a/modules/angular2/test/common/forms/integration_spec.ts b/modules/angular2/test/common/forms/integration_spec.ts
@@ -484,7 +484,7 @@ export function main() {
                expect(sfOption.nativeElement.selected).toBe(true);
 
                select.nativeElement.value = "NYC";
-               dispatchEvent(select.nativeElement, "input");
+               dispatchEvent(select.nativeElement, "change");
 
                expect(fixture.debugElement.componentInstance.form.value).toEqual({"city": 'NYC'});
                expect(sfOption.nativeElement.selected).toBe(false);
@@ -539,7 +539,7 @@ export function main() {
                       expect(nycOption.nativeElement.selected).toBe(true);
 
                       select.nativeElement.value = "2: Object";
-                      dispatchEvent(select.nativeElement, "input");
+                      dispatchEvent(select.nativeElement, "change");
                       fixture.detectChanges();
                       TimerWrapper.setTimeout(() => {
                         expect(testComp.selectedCity['name']).toEqual("Buffalo");
