Can't type into input field

Versions:

• VueJs: ^2.5.2
• Vee-Validate: ^2.0.9

Description:

In some cases some people have reported that they have not entered into the input form fields, investigating this issue, i have happened in Chrome for Android (At least is the browser and have been able to reproduce this error) field is not disabled or readonly, field is focuses and cursor is blinking but no typing is allowed. Two way binding seems to work because vee-validate return the error message related to this field. After some testing i discover that this problem is related with the event field configuration, after change from event: ‘input|blur’ to event: ‘’ this issue stops happening.

Steps To Reproduce:

To reproduce his error you need to build the project and test this build with Chrome for Android. If you change from events: ‘input|blur’ to events: ‘’ it stops happening.

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
const dict = {
es: {...},
en: {...}
}
Validator.localize('es', dict)
const config = {
  events: 'input|blur'
}
Vue.use(VeeValidate, config)

<input type="text" class="form__input" name="name" id="name" v-model="element.name" v-validate="'required|min:3|max:250'">
<span v-show="errors.has('name')" class="help is-danger form__alert">{{ errors.first('name') }}</span>

[logaretm]

In @LeeW32 case the issue occurs because the additional properties on the model are not watchable at the time of binding, which causes the same observation I noted earlier about having to define all props beforehand.

Like @nicokoenig suggested, $set would work because it sets the attributes and allows them to be reactive, or watchable. I believe it is a recommended practice to define your data properly beforehand and using Object.assign to define new props in objects, I think Vue used to complain about this in a warning saying “consider per-initializing the prop” or something similar. When your data is not defined in a nested path.

Now, I will try to re-explain what happens here to discuss potential solutions:

VeeValidate identifies the v-model on the element, and tries to defer the watching to Vue using $watch API method. But the model maybe unwatchable, for example in v-for loop like:

<input v-for="i in inputs" v-model="i.value" v-validate="'required'">

The model exists within the v-for context, but not outside it. Meaning you cannot use $watch to watch the model. So VeeValidate has a couple of fallbacks here. First it checks if the input is a component, if so It will instead try to watch the model from that component, it should be much easier since it would just watch the value prop in that input component. But for native HTML inputs this is not possible.

The last fallback is that it adds event listeners on the element and uses whatever events are configured. Now there are some caveats here. v-model doesn’t work the same on mobile devices and desktops because of the composition events (not all browsers tho). So when you enter a value the input event emits as per the HTML5 Spec so it gets validated and the error would be displayed, but there is already a DOM update in progress which tries to update the field value on the UI. What happens is when the error is added to the error bag, the UI update will get blocked. In other words, the errorbag will cause a re-render before the DOM is updated i.e: validates before the value is committed to the input.

There a couple of workarounds, define your props beforehand. Use change event for mobile devices using a useragent detection script, or use $set like @nicokoenig mentioned.

Fixing this issue is hard, since I will not be adding a user-agent detection script to this library, I hope I will not have to. I have been thinking about trying to make the errors added/removed on the next Vue tick or the next DOM update if there is a pending one, need to dig deeper into vue for this.

[LeeW32]

Also a massive thanks to everyone involved with these projects - having come from a .NET background it certainly takes some adjusting to the JavaScript eco system…but I’m absolutely loving learning vue and libraries such as vee validate that complement it so well!!!