Number field with datalist does not trigger change event

[nepa]

I'm submitting a ...

• regression from 1.7.0
• security issue
• issue caused by a new browser version
• other

Current behavior:
Input field for numbers does not trigger change event, when option from datalist is selected.

This applies to both, Microsoft Edge and Internet Explorer 11. Opera works as expected.

Expected / new behavior:
Model should change, once a suggested value is selected from the datalist.

The ng-change callback should also trigger, once a new value is selected.

Minimal reproduction of the problem with instructions:

<input type="number" list="suggestions" ng-model="willNotChange" ng-change="notTriggered()" />

<datalist id="suggestions">
  <option value="0.5"></option>
  <option value="1"></option>
  <option value="1.5"></option>
  <option value="2"></option>
</datalist>

{{willNotChange | json}}

AngularJS version: 1.8.2

Browser: [ Microsoft Edge | IE 11 ]

Anything else: Works fine in Opera.

[gkalpak]

This depends on when each browser emits the input or change event. For context, we ignore the input event on IEs, because their support of input is very buggy.

It seems that latest Chrome, Firefox, Opera and Edge (Chromium-based) fire the event as soon as you click on the value. IE on the other hand emits the change event only once the input loses focus (so that is when the update will happen).

Since AngularJS is in Long-Term Support mode now (see here for more info), this will not be fixed.

As a work-around, you could define a directive to target input[list] elements and emit a change event when they emit an input event. For example, something like:

.directive('input', function () {
  return {
    link: function ($scope, $elem, $attrs) {
      if (!$attrs.list) return;
      $elem.on('input', function () { $elem.triggerHandler('change'); });
    }
  };
});

[nepa]

Thank you for pointing out that IE's support for input events is buggy and you do not support them for that reason.

I also understand that AngularJS is in LTS mode and you no longer fix these issues.

However, your suggested workaround just works for Internet Explorer 11. Microsoft Edge still does not emit any event, once an item is selected from the datalist. I guess, I'm better off disabling suggestions completely in Microsoft's browsers.