Skip to content
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 · 42 comments
Closed

Comments

@dougludlow
Copy link

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 ngModel/ngModelChange not working in FireFox 43.0.4 beta.1 ngModel/ngModelChange not working in FireFox 43.0.4 Jan 19, 2016
@neridonk
Copy link

+1

@eostrom
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@zoechi
Copy link
Contributor

zoechi commented Feb 4, 2016

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

@Sabartius
Copy link

@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 beta.1 ngModel/ngModelChange not working in FireFox 43.0.4 beta.1 ngModel/ngModelChange not working on select element in FireFox 43.0.4 Feb 4, 2016
@jonnysamps
Copy link

+1

1 similar comment
@danielgerlag
Copy link

+1

@dougludlow
Copy link
Author

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

@dougludlow
Copy link
Author

@CaselIT
Copy link
Contributor

CaselIT commented Feb 16, 2016

Also not working also on Edge 25

@frederikschubert
Copy link

IE11 also has this problem.

@mircoba
Copy link

mircoba commented Feb 19, 2016

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

@behbc
Copy link

behbc commented Feb 23, 2016

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

@DHainzl
Copy link

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
Copy link

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
Copy link
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
Copy link

@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
Copy link

e-oz commented Mar 12, 2016

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

@suuuunto
Copy link

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
@KernowCode
Copy link

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
Copy link

e-oz commented Apr 12, 2016

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

@dessalines
Copy link

dessalines commented Apr 14, 2016

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

@e-oz
Copy link

e-oz commented Apr 14, 2016

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

@dessalines
Copy link

@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
Copy link

jderose9 commented Apr 19, 2016

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

@e-oz
Copy link

e-oz commented Apr 22, 2016

Thank you very much! 👏🎉☀️

@ruwhan
Copy link

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
Copy link
Contributor

awerlang commented May 4, 2016

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

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.