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

Closes #6573

Closes #8148
This commit is contained in:
Kara Erickson 2016-04-20 15:50:50 -07:00 committed by Kara
parent 8db62151d2
commit c3daccd83b
2 changed files with 9 additions and 3 deletions

View File

@ -36,10 +36,16 @@ function _extractId(valueString: string): string {
/** /**
* The accessor for writing a value and listening to changes on a select element. * 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({ @Directive({
selector: 'select[ngControl],select[ngFormControl],select[ngModel]', 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] providers: [SELECT_VALUE_ACCESSOR]
}) })
export class SelectControlValueAccessor implements ControlValueAccessor { export class SelectControlValueAccessor implements ControlValueAccessor {

View File

@ -484,7 +484,7 @@ export function main() {
expect(sfOption.nativeElement.selected).toBe(true); expect(sfOption.nativeElement.selected).toBe(true);
select.nativeElement.value = "NYC"; select.nativeElement.value = "NYC";
dispatchEvent(select.nativeElement, "input"); dispatchEvent(select.nativeElement, "change");
expect(fixture.debugElement.componentInstance.form.value).toEqual({"city": 'NYC'}); expect(fixture.debugElement.componentInstance.form.value).toEqual({"city": 'NYC'});
expect(sfOption.nativeElement.selected).toBe(false); expect(sfOption.nativeElement.selected).toBe(false);
@ -539,7 +539,7 @@ export function main() {
expect(nycOption.nativeElement.selected).toBe(true); expect(nycOption.nativeElement.selected).toBe(true);
select.nativeElement.value = "2: Object"; select.nativeElement.value = "2: Object";
dispatchEvent(select.nativeElement, "input"); dispatchEvent(select.nativeElement, "change");
fixture.detectChanges(); fixture.detectChanges();
TimerWrapper.setTimeout(() => { TimerWrapper.setTimeout(() => {
expect(testComp.selectedCity['name']).toEqual("Buffalo"); expect(testComp.selectedCity['name']).toEqual("Buffalo");