Model not updating when Select element is manipulated via arrow keys

[jjmaun]

Hello, I noticed a bug today. When I use the keyboard to change the selected option in a select element, the angular model is not updated.

This happens both when using arrow keys, and when using alpha keys (first letter of an option in the select element).

Here is a quick plunker to see what I am describing.
http://plnkr.co/edit/gWMxy0HbVhfhmV4jifUJ?p=preview

This works find in Chrome and Internet Explorer, but not in Firefox.

Thanks

[vincentdieltiens]

Don't have any problems under Firefox (on Mac OS X)

[btford]

Can't reproduce on Firefox 24.0. What version are you using?

[jjmaun]

I originally found the problem while working on my work laptop, which I don't have with me at the moment, not sure the version on that machine. However, I just tried it on my home pc and the same thing is happening.

Home pc is running Firefox 24.0, both machines using win 7 64 bit.

Edit: Work laptop is also running Firefox 24.0

[digitalfiz]

I can reproduce the issue. I did notice that it will update the model if you hit enter or on blur but not until one of those things happen.

I tested on Firefox 24.0 on Ubuntu 13.04 x64

Seems to work fine in chrome though.

[petebacondarwin]

This is an issue with Firefox

Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in elements never fires a change event in Gecko until the user hits Enter or switches the focus away from the (see bug 126379).

[ghost]

taken from https://bugzilla.mozilla.org/show_bug.cgi?id=126379#c24 :

Firstly, there is a problem here with consistency. This bug has been marked
"wontfix" because the w3c recommendation says the onChange event should only
happen when the control loses focus. However, if I change the SELECT with my
mouse, it doesn't lose focus, but I still get the event, which is inconsistent
with the currently displayed behaviour with the keyboard.

This plunker shows how to simulate the behavior chrome has:
http://plnkr.co/edit/ccL4Y1LWSOz22o6SZHLS?p=preview
It far from perfect and may trigger the change event more often than needed, but I don't think it will be a performance problem.
Anyway, it solves the problem for me.

[alainbryden]

This was bothering me too and I went looking for a bug report, but I see now that it updates when the control subsequently loses focus, so I can get behind that behavior.

[digitalfiz]

This is definitely a browser bug not an angular bug. I think this issue should be closed and people should focus on bugging Mozilla at https://bugzilla.mozilla.org/show_bug.cgi?id=126379

[joshuapowell]

We've been able to repeat this on Google Chrome Version 39.0.2171.95 (64-bit) running Angular 1.3.7.

The steps to repeat have been:

1. Use the "Tab" key to jump down to the <select> field in question
2. Press a letter on the keyboard to select an option (e.g., P for Pennsylvania)
3. Tab to next field in list

If you're logging out your scope changes, then you'll notice the value of the <select> field is incorrect.

To resolve I have simply used the fix described here which works great. http://stackoverflow.com/questions/22630744/ng-options-model-not-updated-when-use-arrow-keyboard-instead-of-mouse

[gkalpak]

@joshuapowell: It sounds like this is realated to #9134 (and a bunch of similar issues), which is related to a Chrome bug - has been reported here.

[joshuapowell]

Thanks @gkalpak

[iiminov]

Not entirely sure if its a good idea to add this here plunker example
http://plnkr.co/edit/N9m1x2LuvXrFe6ByUMN5?p=preview

What I try to demonstrate is; when I tab to my select box and using my keyboard arrow keys to select first option (Chrome) ng-model="selectValue" updates.

If I tap down arrow key again and select Mozilla the model doesn't get updated.

And subsequent tap of up/down arrow keys will update model as expected.

Simple click select also update the model as expected.

While this is a major issue for me right now. I'd like to make angular team aware of behaviour I am observing for future reference.

All previous example display the same behaviour as soon as I comment out default option.

<select id="browsers" ng-model="selectValue" ng-options="browser for browser in browsers">
  <!--<option value="">Select One</option>-->
</select>

BTW: I am testing with current stable version of AngularJS v1.3.16 and Chrome Version 43.0.2357.124 m

[gkalpak]

@iiminov, as already mentioned, this is a known issue and is due to a bug in Chrome.
Until the bug is resolved, the solution/workaround is to use an explicit empty option.

(It is not clear what you are trying to demonstrate (and how it is different from the demos already discussed).)

[iiminov]

@gkalpak, my apologies, I guess I failed to realise that explicit use of empty option was actually a workaround. Thank you for pointing it out.