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.

What browser are you using? Your plunkr appears to work fine on Firefox. — entropic
– entropic, Commented May 27, 2015 at 14:46
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. — phonicx
– phonicx, Commented May 27, 2015 at 15:06
Even using ng-model-options="{ 'debounce': 1000 }" it still select the wrong one. Maybe a browser issue ? — Okazari
– Okazari, Commented May 27, 2015 at 15:25
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 — phonicx
– phonicx, Commented May 27, 2015 at 15:27

Reasurria · Accepted Answer · 2015-05-28 05:54:55Z

5

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.

answered May 28, 2015 at 5:54

Reasurria

1,85816 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

phonicx Over a year ago

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

Collectives™ on Stack Overflow

Angular.js ng-option select using keypress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related