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

[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?

[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

[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...

[jonnysamps]

+1

[danielgerlag]

+1

[dougludlow]

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

[dougludlow]

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

[CaselIT]

Also not working also on Edge 25

[frederikschubert]

IE11 also has this problem.

[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.

[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.

[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

[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)

[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?

[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.

[jderose9]

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

[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.

[awerlang]

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}