Select element in angular not updating modelValue on second selection

Question

I've got a select element bound to a model in an angular view. When filling out the form with the keyboard, I noticed that if you down arrow to the second option the value, the model still represents the first value. This only happens when using the keyboard to fill out the form.

Set up is pretty simple, using angular 1.4.3:

var app = angular.module('app', []);

app.controller('myController', function() {
  var vm = this;

  vm.options = [{
    Id: 1,
    Value: 'A'
  }, {
    Id: 2,
    Value: 'B'
  }, {
    Id: 3,
    Value: 'C'
  }]
});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>

<body ng-app="app">
  <div ng-controller="myController as ctrl">
    <p>
      Model is not updated on second down button push. Repro:
      <ol>
        <li>Tab to select element</li>
        <li>Hit down and notice the optionId updated to 1</li>
        <li>Hit down again and notice that the displayed value changes to B, but optionId stays as 1</li>
        <li>Hit down again and notice that the displayed value changes to C, and optionId changes to 3</li>
        <li>Hit up and notice that displayed value changes to B, and optionId changes to 2</li>
      </ol>
      Why doesn't the optionId = 2 on the initial selection of B
    </p>
    <select id="mySelect" ng-options="item.Id as item.Value for item in ctrl.options" ng-model="ctrl.optionId" style="width:200px">
    </select>
    <div><strong>optionId: {{ctrl.optionId}}</strong>
    </div>
  </div>
</body>

Why doesn't the model update on the second down arrow press?

Update Here's a plunker that exhibits the behavior, http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2nd Update Here's a modified plunker that implements the workaround Matt proposed. This workaround causes the desired behavior in Chrome, Firefox, and Internet Explorer

Up. Weird. Hope you solve this i'm curious as to whats going on. Suspecting it's a bug — scniro
– scniro, Commented Aug 12, 2015 at 3:30
Very weird indeed. I've opened up an issue github.com/angular/angular.js/issues/12562 — Dustin Hodges
– Dustin Hodges, Commented Aug 12, 2015 at 14:15
What browser are you using? I see the issue in Chrome, but in IE11 (on Win7), all seems fine. I wonder if it is more a dropdown issue in the browser — Matt Tester
– Matt Tester, Commented Aug 13, 2015 at 23:03
It doesn't trigger the onchange event on the select. Like @MattTester I can only replicate in Chrome. — Jorg
– Jorg, Commented Aug 13, 2015 at 23:15
I was using Chrome. Can't repro in IE. Interestingly in Firefox 40.0.2, It doesn't appear the model is updated at all while using the keyboard. I never see a value for the optionId — Dustin Hodges
– Dustin Hodges, Commented Aug 13, 2015 at 23:32

Matt · Accepted Answer · 2015-08-14 18:38:03Z

5

+250

I believe your problem clones a pre-existing angular issue which has a work around available.

Feel free to browse the issue and trace the conversation and some of the duplicates.

The work around suggested for Chrome/Safari/Firefox looks like this:

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

Edit:

The OP's issue in the comments above was closed as a duplicate for this reason.

edited Aug 14, 2015 at 18:38

answered Aug 13, 2015 at 23:16

Matt

1,0338 silver badges16 bronze badges

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

2 Comments

Dustin Hodges Over a year ago

Alright that might work. May need to include for firefox too, because the keyboard events don't cause change events in FF according to that thread.

Matt Over a year ago

@Dustin Hodges That solution works for me in FF as well using the plnkr mentioned in the issue. (plnkr.co/edit/PcD55HqECuJrSC9usUFv?p=preview)

Collectives™ on Stack Overflow

Select element in angular not updating modelValue on second selection

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related