input: type="number" arrow keys are not handled on IE11

[Gaurav9969351313]

mdInput is not working in IE10 and IE11. When using type=number, side arrow event doesn't work. Also I wanted to restrict the decimal point to enter into mdInput text box.

The issue can be reproduced using following code (use IE10 to check the expected results)

<input mdInput type="number" onkeypress="return event.code !='NumpadDecimal'  && event.code!='Period'" step="10" max="100" min="0">

In chrome, I'm getting the desired output as when we press up/down arrows the input field text jumps to 10 ( as step is=10 ). But same is not working in IE10 and IE11. Kindly suggest a solution.

Do i need to update my polyfills?
If yes then please suggest for the same....
Thank You in Advance... :)

[Splaktar]

It's not fully clear what you are reporting here as there seem to be a few different issues being explained.

Are these the problems that you are seeing?

1. using the up/down arrow keys on IE11 don't cause the value to increment/decrement
2. using the right/left arrow moves the cursor within the input and doesn't increment/decrement by the defined step?
3. something with restricting the decimal point entry?

I can look into (1) as I think I understand it.

I'm not sure that (2) is a problem. I did some research about a11y and keyboard interaction and I haven't been able to find any guidance yet for stepping of number inputs. I'll research this some more, but if you have a reference to some docs it would be helpful.

I need more information on (3). We have an input example with decimal points in our Input with Icons demo. If you could provide a CodePen reproduction with an example of the issue and the desired behavior that would be helpful.

[Splaktar]

I just did some testing of (1) on IE and Edge, he's what I found

• IE11: up/down arrow keys do not have any effect
• Edge: up/down arrow keys increment/decrement the value but the browser window scrolls as well

I'll take a look at why the keys aren't being handled on IE11 and why the event is propagating out of the control on Edge.

For (2), on both browsers, the left/right arrows move the cursor left/right within the characters of the input. This is working as intended.