New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dougludlow opened this Issue Jan 19, 2016 · 41 comments

Comments

@dougludlow

dougludlow commented Jan 19, 2016

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;
    }
}

@dougludlow dougludlow changed the title from ngModel/ngModelChange not working in FireFox 43.0.4 to beta.1 ngModel/ngModelChange not working in FireFox 43.0.4 Jan 19, 2016

@neridonk

This comment has been minimized.

Show comment
Hide comment
@neridonk

neridonk commented Jan 25, 2016

+1

@eostrom

This comment has been minimized.

Show comment
Hide comment
@eostrom

eostrom Jan 27, 2016

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 commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@eostrom

eostrom Jan 27, 2016

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 commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@DenisKolodin

DenisKolodin Jan 28, 2016

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 commented Jan 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Sabartius

Sabartius Feb 4, 2016

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

Sabartius commented Feb 4, 2016

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

@zoechi

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Feb 4, 2016

Contributor

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

Contributor

zoechi commented Feb 4, 2016

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

@Sabartius

This comment has been minimized.

Show comment
Hide comment
@Sabartius

Sabartius Feb 4, 2016

@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 commented Feb 4, 2016

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

@dougludlow dougludlow changed the title from beta.1 ngModel/ngModelChange not working in FireFox 43.0.4 to beta.1 ngModel/ngModelChange not working on select element in FireFox 43.0.4 Feb 4, 2016

@jonnysamps

This comment has been minimized.

Show comment
Hide comment
@jonnysamps

jonnysamps commented Feb 10, 2016

+1

1 similar comment
@danielgerlag

This comment has been minimized.

Show comment
Hide comment
@danielgerlag

danielgerlag commented Feb 10, 2016

+1

@dougludlow

This comment has been minimized.

Show comment
Hide comment
@dougludlow

dougludlow Feb 11, 2016

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

dougludlow commented Feb 11, 2016

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

@dougludlow

This comment has been minimized.

Show comment
Hide comment
@CaselIT

This comment has been minimized.

Show comment
Hide comment
@CaselIT

CaselIT Feb 16, 2016

Contributor

Also not working also on Edge 25

Contributor

CaselIT commented Feb 16, 2016

Also not working also on Edge 25

@frederikschubert

This comment has been minimized.

Show comment
Hide comment
@frederikschubert

frederikschubert Feb 19, 2016

IE11 also has this problem.

frederikschubert commented Feb 19, 2016

IE11 also has this problem.

@mirco312312

This comment has been minimized.

Show comment
Hide comment
@mirco312312

mirco312312 Feb 19, 2016

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

mirco312312 commented Feb 19, 2016

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

@behbc

This comment has been minimized.

Show comment
Hide comment
@behbc

behbc Feb 23, 2016

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

behbc commented Feb 23, 2016

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

@mswehli

This comment has been minimized.

Show comment
Hide comment
@mswehli

mswehli Mar 7, 2016

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

mswehli commented Mar 7, 2016

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

@theodorejb

This comment has been minimized.

Show comment
Hide comment
@theodorejb

theodorejb Mar 9, 2016

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 commented Mar 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@DHainzl

DHainzl Mar 9, 2016

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 commented Mar 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmesko

mmesko Mar 9, 2016

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 commented Mar 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@zoechi

zoechi Mar 9, 2016

Contributor

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

Contributor

zoechi commented Mar 9, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@flore2003

flore2003 Mar 9, 2016

@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 commented Mar 9, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@e-oz

e-oz Mar 12, 2016

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

e-oz commented Mar 12, 2016

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

@suuuunto

This comment has been minimized.

Show comment
Hide comment
@suuuunto

suuuunto Apr 6, 2016

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

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

suuuunto commented Apr 6, 2016

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

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

@mhevery mhevery assigned kara and unassigned vsavkin Apr 8, 2016

stefanseifert added a commit to stefanseifert/angular2-webpack-starter that referenced this issue Apr 8, 2016

@KernowCode

This comment has been minimized.

Show comment
Hide comment
@KernowCode

KernowCode Apr 12, 2016

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 commented Apr 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@e-oz

e-oz Apr 12, 2016

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

e-oz commented Apr 12, 2016

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

@dessalines

This comment has been minimized.

Show comment
Hide comment
@dessalines

dessalines Apr 14, 2016

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

dessalines commented Apr 14, 2016

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

@e-oz

This comment has been minimized.

Show comment
Hide comment
@e-oz

e-oz commented Apr 14, 2016

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

@dessalines

This comment has been minimized.

Show comment
Hide comment
@dessalines

dessalines Apr 15, 2016

@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 commented Apr 15, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@jderose9

jderose9 Apr 19, 2016

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

jderose9 commented Apr 19, 2016

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

kara added a commit to kara/angular that referenced this issue Apr 20, 2016

@mhevery mhevery closed this in c3daccd Apr 22, 2016

@e-oz

This comment has been minimized.

Show comment
Hide comment
@e-oz

e-oz Apr 22, 2016

Thank you very much! 👏🎉☀️

e-oz commented Apr 22, 2016

Thank you very much! 👏🎉☀️

@ruwhan

This comment has been minimized.

Show comment
Hide comment
@ruwhan

ruwhan May 4, 2016

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

PS: I'm using Angular2 beta 15.

ruwhan commented May 4, 2016

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

PS: I'm using Angular2 beta 15.

@awerlang

This comment has been minimized.

Show comment
Hide comment
@awerlang

awerlang May 4, 2016

Contributor

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

Contributor

awerlang commented May 4, 2016

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

@kara kara added the comp: forms label Sep 6, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment