Angular.js: Microsoft Edge: ng-model doesn't work with input type="number" and arrow keys

[X-Y]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
In Microsoft Edge, I want the ng-model value to update when I press arrow keys inside an input with type="number", however it is not

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

https://plnkr.co/edit/yZaGxkYG87C1YCNSKnf0?p=preview

1. Open link in Microsoft Edge
2. Select the input box
3. Press up or down arrow key

What is the expected behavior?

The number beneath the input box should be synchronized with the value inside the input box

What is the motivation / use case for changing the behavior?

This is one way for users to interact with numeric input boxes

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

angularjs: 1.5.8
browser: Microsoft Edge 38

Other information (e.g. stacktraces, related issues, suggestions how to fix)

[gkalpak]

This is because Edge does not emit the input or change events that Angular expects when the value changes via up/down arrows. I am not sure what the spec has to say, but if I had to guess I'd say it should.

You can fix it yourself by adding the following directive (optionally on Edge only):

.directive('input', () => {
  return {
    link: (scope, elem) => {
      if (elem[0].type === 'number') {
        elem.on('keydown', evt => {
          switch (evt.which) {
            case 38:   // UP_ARROW
            case 40:   // DOWN_ARROW
              scope.$evalAsync(() => elem.triggerHandler('input'));
              break;

          }
        });
      }
    }
  };
});

Demo

[jbedard]

@gkalpak what if we just modify the existing hack to not ignore up/down?

[gkalpak]

@jbedard, that hack is not in effect on Edge (so ironically, IEs would work where Edge fails 😛).

---

I couldn't find anything in any relevant spec about the behavior of up/down arrows (possibly because there is nothing to find), but from what I understand it should fire the events.

From the HTML spec:

This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs.

So, updating the value with the up/down arrows is probably the user agent vendors' choice for best serving our needs.

What the spec _does say_ though is that the input and change events apply to input[type=number]:

The input and change events apply.

It further clarifies about input and change:

input: [...] Fired at controls when the user changes the value
change: [...] Fired at controls when the user commits a value change

---

We could sure add a work-around in core, but since this is a browser issue (afaict) and the work-around is easy to apply outside core (see my previous comment), I would rather try and get Edge fix this.

@X-Y, could you maybe report the bug to Edge (if it is not already reported)?

[X-Y]

Cool thanks! I'll check with the Edge team

[frederikprijck]

@RobertBColton Very interesting, Are you sure it's supposed to be fixed? I can't tell by looking at the issuetracker.

Sadly, I have no access to Edge atm but I should have access to it later today.

---

It's a bit funny that the issuetracker for Edge has a cirular reference pointing to a parent issue :joy:

See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10242461/, click parent, and click parent again. 🙈

[frederikprijck]

If someone has current access to Edge, do feel free to test the plunkr mentioned here tho! :D

[frederikprijck]

saw it was supposed to be fixed by Microsoft

So i guess this is not true 😞 Thanks for testing it tho!! 😄

[jeson114]

+1

[armpogart]

Issue seems to be resolved in latest Edge (Microsoft EdgeHTML 16.16299, Microsoft Edge 41.16299.15.0) in Fall Creators update. Mentioned plunkr example works for me. Can any other person confirm?

[tieneguasa]

For me, it doesn't seem to to be resolved, I tested now that plunkr also with Microsoft EdgeHTML 16.16299, Microsoft Edge 41.16299.15.0, and the div under the input shows nothing, and though the number in the input changes if you press the keys up/down, the event onChange is not triggered...

[Narretz]

I also still see this in Microsoft Edge 41.16299.15.0 / Microsoft EdgeHTML 16.16299. To clarify, this is about changing the input with the up/down arrow keys on the keyboard.

The answer in the issue makes me think that they don't consider this a bug:

This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

[Narretz]

This works in Edge 17.