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

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