CODEWITHSUNDEEP
javascriptandroidvue.jsinputdom-events
Moshe L
Moshe L

Reputation: 1905

vue.js + android keyboard - the last typed word is missing on the model

I am trying to debug a strange problem:

<textarea v-model='val' @input='test'></textarea> <div> {{val}}</div> <div>{{log}}</div>'
<script>
var app = new Vue({
    el: "#app", template: "#template", data: { val:"" ,log:""},
    methods: {
        test() {
            this.log += "."
        }
    }
});
</script>

on Android, when Virtual keyboard Autosuggest is enabled, the val variable did not updated on typing, until the user will press a space key, or clicked the Autosuggested word, or blur the textarea.

Upvotes: 2

Views: 2281

Answers (2)

qhrtzll
qhrtzll

Reputation: 76

For those still coming across this problem, binding to the keydown event or turning off autocorrect may not be necessary. Since 

v-model="example"

is just syntactic sugar, it can be expanded out to 

:value="example" @input="example= $event.target.value"

I had the exact same problem with Android and autocorrect, and this solved it for me. This may possibly be a bug with Vue 2, since it supposedly worked fine in Vue 1. See the discussion here https://github.com/vuejs/vue/issues/8231

Upvotes: 2

Moshe L
Moshe L

Reputation: 1905

The problem is mainly the input event, that did not fired on typing when the autocorrect is on. This is broke the v-model so the underlying model is not updating on this case.

Workarounds:

  1. remove the v-model, and direct binding to the keydown event

    <textarea  v-model="text"  ref="textarea" autocomplete="off"  @keydown="test" ></textarea>

    as the value is updated after the keydown event, we need to track it manualy via setTimeout and 1ms.

    var vm=this; 
setTimeout(function () { 
   vm.val = vm.$refs.textarea.value; 
   vm.$emit('input', vm.val);  // for components compatibility with v-model
}, 1);

  2. add a autocorrect="off" to the textarea. this will hide the autocorrect from the keyboard so the problem will solved.

Upvotes: 3

Related Questions