HTML5 Select in Angularjs is missing second keydown event

Question

<script>
    var appMod = angular.module('myapp', []);
    appMod.controller('myController', ['$scope', function($scope) {


      $scope.DefaultOptions = ["First", "Second", "Third", "Fourth"];


    }]);
</script>

<body ng-app="myapp" ng-controller="myController">
  <div>
    <select ng-options="o as o for o in DefaultOptions" ng-model="chosen"></select>
  </div>
  <div>
    Chosen Value: <span ng-bind="chosen"></span>
  </div>
</body>

Instructions:
1. In Chrome(not in Firefox!), select the dropdown with mouse and choose "First"
2. Then press downarrow.
3. Observe that the dropdown shows "Second" while the dynamically binded value still shows "Frist"
4. Press downarrow again.
5. Now both the select as well as binded field are showing "Third".
6. Clearly, there is some "magic" happening in angular with respect to second keydown event or is the ng-options used incorrectly here?
7. This happens always, even if you choose "Third" instead of "First" in first step.

Here is the plunker for the question in title.

http://embed.plnkr.co/x7dauZHIlriXpWd4kmgz/preview

Can someone please explain is this a bug in Angularjs or some problem in my usage of ng-options?

PS: I thought, of all the browsers, Chrome would be the nicest to Angularjs.

In background Angular Binding works on value and by default there is no selected value. That might be the case. — HaRdik Kaji
– HaRdik Kaji, Commented Sep 26, 2015 at 10:24
@HaRdikKaji The dropdown and binding both get updated properly on first keydown event. So there is no question of default selected value here. Its all about second keydown event. — Ashish Anand
– Ashish Anand, Commented Sep 26, 2015 at 10:51
While investigating, I saw other stackoverflow questions and their plunker code had the same problem of navigating select element through keyboard. For Ex/- stackoverflow.com/questions/17574081/… — Ashish Anand
– Ashish Anand, Commented Sep 26, 2015 at 11:20

Ashish Anand · Accepted Answer · 2015-09-26 12:39:57Z

0

<select ng-options="o as o for o in DefaultOptions" ng-model="chosen">
  <option value='' disabled selected style='display:none;'>Choose an option</option>         
</select>

Found the answer(rather a weird trick to weird behaviour). If an option is specified in the above manner, then dropdown can safely be navigated through keyboard. Who could have thought of that!

answered Sep 26, 2015 at 12:39

Ashish Anand

5366 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

HTML5 Select in Angularjs is missing second keydown event

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related