ng-change for <select> is invoked before the model is updated

[RobertSzymacha]

I have following component template:

...
<select
    ng-change="ctrl.selectionChanged()"
    ng-model="ctrl.currentValue">
  <option value="aaa">aaa</option>
  <option value="bbb">bbb</option>
  <option value="ccc">ccc</option>
</select>
...

And the component's dart code:

...
String currentValue = "aaa";
void selectionChanged() {
  print("currentValue $currentValue");
}
...

After selecting "bbb" in the select, controller prints:

currentValue aaa

while it should print "currentValue bbb"

[mhevery]

1ab385e can not reproduce, assuming no longer an issue.

[sodawong]

I got the same issue as RobertSzymacha even in Dart SDK version 1.2.0-dev.5.7.

[sodawong]

For temporary bug fix, I need to add a time delay of 1 ms as below to get the correct value:

import 'dart:async';
String currentValue = "aaa";
void selectionChanged() {
  new Timer(const Duration(milliseconds: 1), () {
    print("currentValue $currentValue");
  }
}

i.e. After selecting "bbb" in the select, controller prints: bbb

[RobertSzymacha]

Instead of adding 1 ms delay, you can simply run it in a Future. It's still a hack, but with less overhead (see https://www.dartlang.org/articles/event-loop/).

import 'dart:async';
String currentValue = "aaa";
void selectionChanged() {
  new Future(() {
    print("currentValue $currentValue");
  });
}

[zoechi]

same issue on http://stackoverflow.com/questions/22509257

[mhevery]

mhevery@f26e3ba

The issue is that ng-change and input directive can be registered in any order.
This makes it possible for on-change event to execute before input event gets a
chance to run.

Changing from ng-change to on-change fixes the issue, since events are on-change
has to bubble to EventHandler before it can run. This is not quite right, since if
EventHandler is registered on the same element as input element, then again we don't
know which event listener will run first.

The separate registration model also means that apply() gets run for each element,
which is wasteful.

A proper way to fix this is for EventHandler to handle both the change event for
both on-change as well as for input element. This means that EventHandler needs to
be able to call listener function on InputElement. The only way to do that is for the
EventHandler to attach the listener function to the Expando. Currently we are favoring
the NgElement over NgPorbe object. So NgElement needs to have a list of listeners from
underlying directives which are not expressions on the DOM (as is on-change). These
listeners need to be stored in NgElement and retrieved by the EventHandler when event
fires.