beta.1 ngModel/ngModelChange not working on select element in FireFox 43.0.4

[dougludlow]

I'm seeing an issue in beta.1 that appears to be a regression from beta.0. ngModel/ngModelChange don't appear to work at all in Firefox, at least on selects. Here's a plunkr demo. You'll notice if you change the script src's to beta.0, the selects work as expected. Is there a breaking change that I'm missing? I don't see anything about ngModel/ngModelChange in the changelog.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <h1>ngModel/ngModelChange not working on Firefox</h1>
        <select [ngModel]="name" (ngModelChange)="changed($event)">
            <option value=""></option>
            <option *ngFor="#n of names" [value]="n">{{n}}</option>
        </select>
        <pre>Name: {{name}}</pre>

        <select [(ngModel)]="name">
            <option value=""></option>
            <option *ngFor="#n of names" [value]="n">{{n}}</option>
        </select>
        <pre>Name: {{name}}</pre>
    `
})
export class AppComponent { 
    names: String[] = ['Alpha', 'Bravo', 'Charlie'];
    name: string;

    changed(event) {
        this.name = event;
    }
}

[neridonk]

+1

[neridonk]

+1

[eostrom]

Also in Firefox 45.0a2 (2016-01-22).

Could be b44d36c. It removes a (change) binding from select so as not to call onChange twice, but maybe in Firefox that (change) was needed?

[eostrom]

Also in Firefox 45.0a2 (2016-01-22).

Could be b44d36c. It removes a (change) binding from select so as not to call onChange twice, but maybe in Firefox that (change) was needed?

[eostrom]

Confirmed, I re-added the missing line and my selects work again.

I'm not going to submit a PR because it would break #5969. @vsavkin, any thoughts?

[eostrom]

Confirmed, I re-added the missing line and my selects work again.

I'm not going to submit a PR because it would break #5969. @vsavkin, any thoughts?

[DenisKolodin]

For 44.0 also doesn't work.

Temporary I've fix it locally with:

<select [ngModel]="value" (change)="changeValue($event.target.value)">

Bug is actual for select.

[DenisKolodin]

For 44.0 also doesn't work.

Temporary I've fix it locally with:

<select [ngModel]="value" (change)="changeValue($event.target.value)">

Bug is actual for select.

[Sabartius]

It doesn't even work in Chrome properly, if you automate your angular2 application with protractor. Something's fishy about these "input"-Events

[Sabartius]

It doesn't even work in Chrome properly, if you automate your angular2 application with protractor. Something's fishy about these "input"-Events

[zoechi]

@Sabartius could be related to #6311 - just a wild guess.

[zoechi]

@Sabartius could be related to #6311 - just a wild guess.

[Sabartius]

@zoechi I'm not sure, but i'm very sure it's this change causing the trouble: b44d36c
I had a similar issue with input-fields and protractor after angular got changed to only rely on the input-event (see: #5730)

Somehow i've got a feeling, as if no one really uses protractor with angular2...

[Sabartius]

@zoechi I'm not sure, but i'm very sure it's this change causing the trouble: b44d36c
I had a similar issue with input-fields and protractor after angular got changed to only rely on the input-event (see: #5730)

Somehow i've got a feeling, as if no one really uses protractor with angular2...

[jonnysamps]

+1

[jonnysamps]

+1

[danielgerlag]

+1

[danielgerlag]

+1

[dougludlow]

Circling back around - I've confirmed that @DenisKolodin's workaround works. Thanks!

[dougludlow]

Circling back around - I've confirmed that @DenisKolodin's workaround works. Thanks!

[dougludlow]

https://plnkr.co/edit/JiuSdU?p=preview

[dougludlow]

https://plnkr.co/edit/JiuSdU?p=preview

[CaselIT]

Also not working also on Edge 25

[CaselIT]

Also not working also on Edge 25

[frederikschubert]

IE11 also has this problem.

[frederikschubert]

IE11 also has this problem.

[mirco312312]

this fix works with the current FF and IE versions: #7185

[mirco312312]

this fix works with the current FF and IE versions: #7185

[behbc]

+1
You also can see this problem on the live example available on the Developer Guides / Form.

[behbc]

+1
You also can see this problem on the live example available on the Developer Guides / Form.

[mswehli]

+1. For both firefox and edge.
ngModelChange event also doesn't work. Which would make sense i guess.

[mswehli]

+1. For both firefox and edge.
ngModelChange event also doesn't work. Which would make sense i guess.

[theodorejb]

This is a pretty serious bug, and the labels say it should be easy to fix, but the issue has been open for over 7 weeks now. @vsavkin is #7185 not the right way to fix this? Is there anything we can do as a community to move this forward? @mhevery

[theodorejb]

This is a pretty serious bug, and the labels say it should be easy to fix, but the issue has been open for over 7 weeks now. @vsavkin is #7185 not the right way to fix this? Is there anything we can do as a community to move this forward? @mhevery

[DHainzl]

Using the workaround @DenisKolodin, I also found out that if you use it in a *ngFor and have the ngControl option set, changing any value also changes the last value of the iteration if the values are the same. See the following plunker (tested in Firefox):

http://plnkr.co/edit/g2tbjJMpOfRwz8ZhY3dj?p=preview

When changing the type of Emilia from "FirstName" to something different, the type of Max also changes. This also happens when the type of Example is the same as the type of Max and you change the type of Example to something different ...

EDIT: This only seems to be a displaying issue, as the value of the last entry in the model stays the correct one ...

[DHainzl]

Using the workaround @DenisKolodin, I also found out that if you use it in a *ngFor and have the ngControl option set, changing any value also changes the last value of the iteration if the values are the same. See the following plunker (tested in Firefox):

http://plnkr.co/edit/g2tbjJMpOfRwz8ZhY3dj?p=preview

When changing the type of Emilia from "FirstName" to something different, the type of Max also changes. This also happens when the type of Example is the same as the type of Max and you change the type of Example to something different ...

EDIT: This only seems to be a displaying issue, as the value of the last entry in the model stays the correct one ...

[mmesko]

I actually make this work (tested in Chrome and Firefox). I need to be able to select department for my employee. This is sth I used:

editEmployee(item){      
        this.selected.employeeName = item.employeeName;
        this.selected.salary = item.salary;
        this.convertToInt(this.selected.Department = this.department ? this.department.departmentNo :    item.departmentNo);
        this.convertToInt(this.selected.departmentNo =  this.selected.Department);

     this._employeeService.editEmployee(this.selected).subscribe(employees => this.getAll());

     }

and in my view it looks:

<form [hidden]="!showEditView" align="center">
       <div>
            <label for="editTitle">Department:</label><br>
            <select [(ngModel)]="selected.departmentNo"  #departmentNo="ngForm"  style="width: 180px" required  (keyup) = "0">
                 <option *ngFor="#department of departments"  [value]="department.departmentNo">{{department.departmentName}}, {{department.departmentLocation}}</option>
           </select> 

        </div>
        <div>
            <label for="editAbrv">Employee name:</label><br>
              <input type="text" [(ngModel)]="selected.employeeName" ngControl="employeeName" #employeeName="ngForm" required (keyup) = "0">
              <div [hidden]="employeeName.valid || employeeName.pristine" class="alert alert-danger">Name is required</div>     
        </div>
        <div>
            <label for="editAbrv">Salary:</label><br>
             <input type="text" [(ngModel)]="selected.salary" ngControl="salary" #salary="ngForm" required (keyup) = "0" > 
             <div [hidden]="salary.valid || salary.pristine" class="alert alert-danger">Salary is required</div>    
        </div>

        <div>
            <a href="javascript:void(0);" (click)="editEmployee(selected); showEditView=false; " (keyup) = "0" title="Edit">
                Save
            </a>
            <a href="javascript:void(0);" (click)="showHideEdit($event); showEditView=false" >
                Cancel
            </a>
        </div>
</form>

I also had a problem with recognizing numbers as numbers (JS has returned me strings) so I implemented:

    convertToInt(string){
       return parseInt(string);
    };

selected object looks like this:

 selected = {employeeNo:null, employeeName:'', departmentNo: null, salary:null, lastModifyDate:null, 
                         Department:{departmentNo:null, departmentName:'', departmentLocation:''}};

:)

[mmesko]

I actually make this work (tested in Chrome and Firefox). I need to be able to select department for my employee. This is sth I used:

editEmployee(item){      
        this.selected.employeeName = item.employeeName;
        this.selected.salary = item.salary;
        this.convertToInt(this.selected.Department = this.department ? this.department.departmentNo :    item.departmentNo);
        this.convertToInt(this.selected.departmentNo =  this.selected.Department);

     this._employeeService.editEmployee(this.selected).subscribe(employees => this.getAll());

     }

and in my view it looks:

<form [hidden]="!showEditView" align="center">
       <div>
            <label for="editTitle">Department:</label><br>
            <select [(ngModel)]="selected.departmentNo"  #departmentNo="ngForm"  style="width: 180px" required  (keyup) = "0">
                 <option *ngFor="#department of departments"  [value]="department.departmentNo">{{department.departmentName}}, {{department.departmentLocation}}</option>
           </select> 

        </div>
        <div>
            <label for="editAbrv">Employee name:</label><br>
              <input type="text" [(ngModel)]="selected.employeeName" ngControl="employeeName" #employeeName="ngForm" required (keyup) = "0">
              <div [hidden]="employeeName.valid || employeeName.pristine" class="alert alert-danger">Name is required</div>     
        </div>
        <div>
            <label for="editAbrv">Salary:</label><br>
             <input type="text" [(ngModel)]="selected.salary" ngControl="salary" #salary="ngForm" required (keyup) = "0" > 
             <div [hidden]="salary.valid || salary.pristine" class="alert alert-danger">Salary is required</div>    
        </div>

        <div>
            <a href="javascript:void(0);" (click)="editEmployee(selected); showEditView=false; " (keyup) = "0" title="Edit">
                Save
            </a>
            <a href="javascript:void(0);" (click)="showHideEdit($event); showEditView=false" >
                Cancel
            </a>
        </div>
</form>

I also had a problem with recognizing numbers as numbers (JS has returned me strings) so I implemented:

    convertToInt(string){
       return parseInt(string);
    };

selected object looks like this:

 selected = {employeeNo:null, employeeName:'', departmentNo: null, salary:null, lastModifyDate:null, 
                         Department:{departmentNo:null, departmentName:'', departmentLocation:''}};

:)

[zoechi]

@theodorejb "easy" also is an indication that the community could jump in. If this fix is important enough someone could take a stab and implement this "easy" fix and create a pull request.

[zoechi]

@theodorejb "easy" also is an indication that the community could jump in. If this fix is important enough someone could take a stab and implement this "easy" fix and create a pull request.

[flore2003]

@zoechi As far as I understand #7185 by @mirco312312 should fix this, but it is currently still failing the integration tests for some reason.

[flore2003]

@zoechi As far as I understand #7185 by @mirco312312 should fix this, but it is currently still failing the integration tests for some reason.

[e-oz]

@robwormald @naomiblack please put this task on radar of team as candidate for the hotlist: A2 Blocking

[e-oz]

@robwormald @naomiblack please put this task on radar of team as candidate for the hotlist: A2 Blocking

[suuuunto]

1+ got the same problem on IE11, solved with workaround:

(change)="somefunction($event.target.value)

[suuuunto]

1+ got the same problem on IE11, solved with workaround:

(change)="somefunction($event.target.value)

[KernowCode]

Regarding @DenisKolodin 's workaround also add a handler for keyup. i.e. (keyup)="doSomethingWith($event)" so catch keypress changes most likely up and down arrows when selecting options. (keyup instead of keydown in case you have any validation dependent on selected option)

[KernowCode]

Regarding @DenisKolodin 's workaround also add a handler for keyup. i.e. (keyup)="doSomethingWith($event)" so catch keypress changes most likely up and down arrows when selecting options. (keyup instead of keydown in case you have any validation dependent on selected option)

[e-oz]

(keyup) is not a workaround, because select can be changed without keypresses at all.

[e-oz]

(keyup) is not a workaround, because select can be changed without keypresses at all.

[dessalines]

This is an issue for me in firefox on beta-15, does anyone know of a workaround?

[dessalines]

This is an issue for me in firefox on beta-15, does anyone know of a workaround?

[e-oz]

@tchoulihan I use this one: #6573 (comment)

[e-oz]

@tchoulihan I use this one: #6573 (comment)

[dessalines]

@e-oz Thank you so much. of course the changeValue(target) function needs to be written to set the correct value, but at least its a workaround.

[dessalines]

@e-oz Thank you so much. of course the changeValue(target) function needs to be written to set the correct value, but at least its a workaround.

[jderose9]

Having the same issue on Android 4.4.4 WebView. The ngModelChange handler never executes.

[jderose9]

Having the same issue on Android 4.4.4 WebView. The ngModelChange handler never executes.

[e-oz]

Thank you very much! 👏🎉☀️

[e-oz]

Thank you very much! 👏🎉☀️

[ruwhan]

just notice this bug when trying to test my web app on Firefox.

PS: I'm using Angular2 beta 15.

[ruwhan]

just notice this bug when trying to test my web app on Firefox.

PS: I'm using Angular2 beta 15.

[awerlang]

@ruwhan just update to beta.16 (see c3daccd). this issue is already closed, btw.

[awerlang]

@ruwhan just update to beta.16 (see c3daccd). this issue is already closed, btw.