Model not updating when dynamic select element is manipulated via arrow keys

[RodolpheGohard]

Steps

1. have a select which all options are generated from ng-options
2. focus the select (but do not select any option yet)
3. type "T"
4. type "T" again

What should happen?
at step 3, the model should be "TN"
at step 4, the model should change to "TX"

What happens and should not?
at step 4, the model stays to "TX"

Environment
Chrome 33 , angular 1.2 or beta 1.3

demonstration (taken from #2230):
http://jsfiddle.net/ADukg/5116/
or http://plnkr.co/edit/2R9YM6KF01bye4kPeoZL?p=preview

work around

1. hard code the empty item <option value="" /> inside the select
2. trigger a change event on keystrokes: $(document).on( 'keyup', 'select', function(){$(this).trigger('change')} );

related

• Model not updating when Select element is manipulated via arrow keys #4216
• select changes value when typing into nearby text input #2230

[caitp]

I'm seeing change events when typing with focus on the select control, using Chrome 34.0.1847.116 (osx 10.9.2), which results in a model update.

This may have been a browser bug. I don't see an issue about it, but the chromium issue tracker is a bit hard to sort through. In any case, at least in Chrome, this seems to be working now

[cmplank]

@caitp I'm seeing this problem also on Chrome Version 34.0.1847.116 Ubuntu 12.04 (260972) and Chrome Version 35.0.1916.153 m on Windows 7.

When pressing the same key twice, the first key press gets synced to the model, but the second is ignored

When looking at http://jsfiddle.net/ADukg/5116/

1. Refresh the page
2. Click the input above the select element
3. Tab into the select element
4. Press 'T' (select box goes to 'TN'; model displays 'TN')
5. Press 'T' (select box goes to 'TX'; model still displays 'TN')
6. Press 'T' any subsequent number of times and the model correctly syncs with the select box

Try again using the 'A' key or the down arrow key instead of 'T' and you will see the same behavior on the second key press.

Note 1: this only happens the first time you interact with the control after a page refresh
Note 2: This does not happen in IE or FF (because FF doesn't fire the change event until the control is blurred). Perhaps it's a Chrome event firing bug?

[caitp]

Yeah that sounds like a chrome bug, hang on

[caitp]

http://jsfiddle.net/mXg9n/ actually, this doesn't look like a chrome bug unless I'm reproducing this wrong (although occasionally it does stop responding to key events)

[cmplank]

I found something else interesting about the way this behaves. You can reproduce it by setting the select box back to a null value or other value not in the bound list, then follow the steps as before.

It can be seen on https://docs.angularjs.org/api/ng/directive/select in the example at the bottom of the page.

1. Click the link labeled "Bogus"
2. Tab to the select element labeled "Color (null not allowed)"
3. Press down arrow
4. Press down arrow again - the model doesn't update

For some reason the other select elements ("Null allowed" and "Grouped by shade") don't exhibit the same behavior.

I've also noticed that it's not necessary to press the same key twice to trigger the behavior. You can click the first and down arrow the second to trigger it. However, the second selection must be made by keyboard (not mouse click) and it must be further down in the list than the first selection.

I'm starting to suspect an issue with the way the select list is being managed internally rather than a missed event.

[gkalpak]

This is also the same issue as #9134.
It seems to indeed be a Chrome bug.

[NateRedding]

I am experiencing the same problem as well in Chrome 41.0.2272.89 (64-bit) and Safari 8.0.4 (10600.4.10.7) on Max OS X. I had just created a Plunker and was about to submit a ticket when I saw this one. Here's my Plunker. http://plnkr.co/edit/Zsb3iiGeoc2Ep0OyaWek

I was able to work around by adding an empty for now.