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.

[vipin030]

Now I'm facing the same problem, I don't think it is a problem related to browser. Is there any way to tackle this problem?

[gkalpak]

@vipin030, could you elaborate why you don't think it is a browser-related problem ?

As explained elsewhere (and confirmed by @NateRedding), adding a explicit empty option solved the issue:

<select ng-model="..." ng-options="...">
  <option value="">--- Select (or any text you like) ---</option>
</select>

[vipin030]

@gkalpak , I have added the explicit option tag into my selection tag, but the problem is still exist, I have tested in firefox and chrome, it is not working in both.

I have developed the same by using javascript for testing purpose, it is working fine on both the browser.

Please check the below code for testing , it will work fine

function getValue(obj){
  console.log(obj.value);
}

<select name="ins_id1" required onkeyup="getValue(this)">
   <option value="Vpn">Vipin</option>
   <option value="Vpn1">Vipin1</option>
   <option value="Vpn2">Vipin2</option>
</select>
`

Please check it and let me know.

[gkalpak]

@vipin030, can you provide the Angular code that is not working for you (or better yet provide a runnable demo, using CodePen, Plnkr, JSFiddle etc) ?

[vipin030]

@gkalpak , please check the below plnkr example, it is not working for me, The browser which I have tested is Firefox 37.0.1. Please let me know your thoughts.
http://plnkr.co/edit/2xSGeVPc9sKUz2SCcbZz?p=preview

[gkalpak]

@vipin030, I tried your demo on latest Chrome and Firefox and it works as expected.

Note that there is one difference between Chrome and Firefox in respect to when the select's value is changed:

1. Chrome updates the element's value as soon as a new option is selected.
2. Firefox updates the element's value only after the element is blurred.

The spec is somewhat unclear regarding that, stating that the value should be updated as soon as the user in done interacting with it, but it is a matter of interpretation.

This might be a source of confusion sometimes.

[vipin030]

@gkalpak , Please check my demo code again
http://plnkr.co/edit/2xSGeVPc9sKUz2SCcbZz?p=preview

You can see two selection box there, second one using our pure javascript to show the value, it is working on every browser regardless of the version

Note:
Firefox also updates the element's value as soon as a new option is selected.( Please check my demo and let me know why angular is not performing the same thing like pure javascript )

[gkalpak]

@vipin030, both versions work as expected (each 😃).
The difference is that in your pure-JS implementation you use onkeyup (which is fired more consistently across browsers), whereas Angular is using onchange (which fires differently on FF vs Chrome).

If you want to update onkeyup instead of onchange, it is easy enough to write a custom directive that listens for the keyup event and triggers a change event:

directive('changeOnKeyup', function changeOnKeyupDirective() {
  return function changeOnKeyupPostLink(scope, elem) {
    elem.on('keyup', elem.triggerHandler.bind(elem, 'change'));
  };
});

Updated plnkr

[Narretz]

Closing as dupe of #9134