ng-options model not updated when use arrow keyboard instead of mouse

Question

I Created js fiddle: Fiddle

I create a form with some ng-options in it, and it have strange behavior when you use the button instead of mouse (just click on the textbox and press "tab" and you can select it using arrow key).

<form ng-controller="MyApp" id="Apps" name="Apps" ng-submit="SendApp()" role="form" novalidate>
    <input type="text" name="title" ng-model="Info.Title" />
    <select id="Formula" ng-model ="Info.Genre" ng-change= "ChangeGenre()"
                        ng-options="id as name for (id, name) in Genre" blank></select>
     <select class="form-control" ng-model ="Info.Program" 
                        ng-options="Program as Name for (Program, Name) in Program" ng-change="ChangeProgram()" blank></select>
    <h3>{{Info.Genre}}</h3>
    <h3>{{Info.Program}}</h3>
    <button type=submit>Submit this </button>
</form>

Javascript:

var theApp = angular.module("TheApp", []);

theApp.controller("MyApp", ['$scope', function($scope){
    $scope.Program = {"1":"Music","2":"Theater","3":"Comedy"};

    $scope.Genre = {"1":"Mystery", "2":"Thriller", "3":"Romance"};

    $scope.ChangeProgram = function(){
        alert($scope.Info.Program + " " + $scope.Info.Genre);
    }
    $scope.ChangeGenre = function (){
        console.log($scope.Info.Genre);

    }
    $scope.SendApp = function(){
        alert($scope.Info.Program + " " + $scope.Info.Genre);
    }
}]);

The ng-model are not updated when you select the first options on First try.

What's Wrong, and How To Fix this?

Update:

As Mentioned on comment below, To reproduce, enter mouse into textfield, tab to combobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized.

Nachison

I tested your fiddle using Chrome 33.0.1750.154 m and can't find anything not working. What kind of behavior are you expecting that isn't there? – Comedienne

did you try it using arrow key in the keyboard? And the alert will not fired when you try choose the second item, and then worked again in third items. I updated the fiddle to use alert. – Nachison

Ah, the error is only on the first try: To reproduce, enter mouse into textfield, tab to combobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized. This seems to be a long running issue: github.com/angular/angular.js/issues/2616 github.com/angular/angular.js/issues/4303 github.com/angular/angular.js/issues/4216 – Comedienne

Just noticed this odd behavior today. It does indeed only occur on the first attempt to change the value using the arrow keys. Subsequent changes work without a problem. I am using Angular 1.2.24. – Burberry

I've submitted a new issue to follow up on this - github.com/angular/angular.js/issues/9201 – Monopolize

@Monopolize Thanks, it's still an issue until now, but it keep getting close on github (don't know why). – Nachison

reptildarat - someone pointed me to a duplicate issue on GitHub - github.com/angular/angular.js/issues/9134, so you may want to follow that one. Also, I've just verified that this is a browser issue (the "change" event is not sent for the second key stroke). Angular guys may implement a workaround, but the directive posted by @Comedienne below worked great for me. – Monopolize

Answer 1

Using the the directive proposed here, this works for me:

theApp.directive("select", function() {
    return {
      restrict: "E",
      require: "?ngModel",
      scope: false,
      link: function (scope, element, attrs, ngModel) {
        if (!ngModel) {
          return;
        }
        element.bind("keyup", function() {
          element.triggerHandler("change");
        })
      }
   }
})

I forked the fiddle.

Comedienne

This solution worked great for me, even for Angular 1.3.x, as it seems to be a known issue. github.com/angular/angular.js/issues/4216 – Gipon