Angular.js ng-option select using keypress

Question

I have a <select> populated via ng-options. In a specific case, when two values are adjacent in the ordered model list and the values have the same first letter, the updating of the model value in angular breaks. This may be a browser event issue but I'm not certain.

This plunker shows the issue and this GIF illustrates it.

I've tried triggering the change event on the field manually without any luck. We would like to keep the list in alphabetical order if possible - changing the order seems to stop the issue.

The issue appears only in Chrome - I'm using Version 43.0.2357.81 (64-bit).

Any ideas would be appreciated. Thanks.

Frightened

What browser are you using? Your plunkr appears to work fine on Firefox. – Geronimo

Thats correct, I forgot to mention that this seems to be a Chrome only issue (although I did write it in the Plunker). I'm using Chrome Version 43.0.2357.81 (64-bit) and have verified it as an issue on multiple machines. – Frightened

Even using ng-model-options="{ 'debounce': 1000 }" it still select the wrong one. Maybe a browser issue ? – Scheel

I think it might be the same as this issue: github.com/angular/angular.js/issues/9134 and code.google.com/p/chromium/issues/detail?id=415505 – Frightened

Answer 1

This is a hack solution and it's ugly but it works.

 <select ng-model="workflowData.section" ng-options="s.name as s.name for s in sections" class="fullwidth" ng-keypress="workflowData.section = s.name">
</select>

I honestly don't know why the original code didn't work.

Disario

This is a nice suggestion, more of an 'angular' fix than some of the others we were looking at - thanks. – Frightened