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

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

@neridonk neridonk commented Jan 25, 2016

+1

@eostrom
Copy link

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

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

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

@zoechi zoechi commented Feb 4, 2016

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

@Sabartius
Copy link

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

@jonnysamps jonnysamps commented Feb 10, 2016

+1

1 similar comment
@danielgerlag
Copy link

@danielgerlag danielgerlag commented Feb 10, 2016

+1

@dougludlow
Copy link
Author

@dougludlow dougludlow commented Feb 11, 2016

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

@CaselIT
Copy link
Contributor

@CaselIT CaselIT commented Feb 16, 2016

Also not working also on Edge 25

@frederikschubert
Copy link

@frederikschubert frederikschubert commented Feb 19, 2016

IE11 also has this problem.

@mirco312312
Copy link

@mirco312312 mirco312312 commented Feb 19, 2016

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

@behbc
Copy link

@behbc behbc commented Feb 23, 2016

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

@mmesko
Copy link

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

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

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

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

@e-oz e-oz commented Apr 12, 2016

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

@dessalines
Copy link

@dessalines 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 e-oz commented Apr 14, 2016

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

@dessalines
Copy link

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

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

@e-oz e-oz commented Apr 22, 2016

Thank you very much! 👏🎉☀️

@ruwhan
Copy link

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

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 9, 2019

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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

You can’t perform that action at this time.