Vue: input type="number" keyboard input does not work with Microsoft Edge

Created on 1 Aug 2017 · 7Comments · Source: vuejs/vue

Version

2.4.2

Reproduction link

Steps to reproduce

Simply create a number input and use the up and down arrow keys on it in Microsoft Edge browser. v-model will not update the bidirectional value.

What is expected?

The value on the Vue component/instance would be updated by the up/down arrow keys as it is in Chrome and Firefox.

What is actually happening?

The value is not updated.

Source

RobertBColton

Most helpful comment

Possible workaround until this is fixed in Edge:

<template>
    <input @input="updateValue" @keyup="updateValueInEdge">
</template>

<script>
export default {
    name: 'FormInput',
    props: {
        value: {
            type: [String, Number],
        },
    },
    methods: {
        updateValueInEdge(e) {
            // Edge does not trigger the input event if arrow keys are used to change the value.
            // The key codes `Up` and `Down` are only used by Microsoft browsers (others use `ArrowUp` and `ArrowDown`).
            if (e.key === 'Up' || e.key === 'Down') {
                this.updateValue(e);
            }
        },
        updateValue(e) {
            this.$emit('input', e.target.value);
        },
    },
};
</script>

maoberlehner on 29 Mar 2018

👀1 🎉1 😄1 👍1

All 7 comments

This is likely an issue of MS Edge itself, and has nothing to do with vue.
Remove vue dependency, and you will get same behavior in Edge:
https://jsfiddle.net/jingkaizhao/50wL7mdz/50822/

jkzing on 1 Aug 2017

👍1

Thanks, I can confirm your vue-less fiddle works in Firefox/Chrome but not Edge.

RobertBColton on 1 Aug 2017

Closing then 🙂

posva on 1 Aug 2017

👍1

Awesome, also it seems like this is already filed as a bug on Edge, didn't find it earlier because it was a little hard to search for.
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10242461/

Cool beans!

RobertBColton on 1 Aug 2017

😄2

For further reference, a similar issue remains open on the AngularJS tracker as well:
https://github.com/angular/angular.js/issues/15366

RobertBColton on 22 Aug 2017

Possible workaround until this is fixed in Edge:

<template>
    <input @input="updateValue" @keyup="updateValueInEdge">
</template>

<script>
export default {
    name: 'FormInput',
    props: {
        value: {
            type: [String, Number],
        },
    },
    methods: {
        updateValueInEdge(e) {
            // Edge does not trigger the input event if arrow keys are used to change the value.
            // The key codes `Up` and `Down` are only used by Microsoft browsers (others use `ArrowUp` and `ArrowDown`).
            if (e.key === 'Up' || e.key === 'Down') {
                this.updateValue(e);
            }
        },
        updateValue(e) {
            this.$emit('input', e.target.value);
        },
    },
};
</script>

maoberlehner on 29 Mar 2018

👀1 🎉1 😄1 👍1

Another workaround would be vue-autonumeric: https://www.npmjs.com/package/vue-autonumeric