Description
Version
2.5.9
Reproduction link
https://jsfiddle.net/ethandm/21va7wje/
Steps to reproduce
Enter a number into the input field. @keydown then fires the keyDwn(e) method, setting this.untouched = false. The green background should be removed on the input field since it has been "touched."
What is expected?
The pressed number should be entered into the input field. Instead, no number is added and it is only after the second press that it is.
If the class binding is removed from the input field it has no problem acting as expected, so I don't think it's an issue with @keydown or setting "this.untouched = false". In addition, if the class binding is left on and v-model.lazy is set to v-model, it works as expected. However, v-model will not work for my use case.
What is actually happening?
The class binding is set but no number is added to the field as it did in Vue 2.2.6 -> 2.4.4.
See here for a reproduction in 2.4.4 and all works as expected with the class binding and v-model.lazy: https://jsfiddle.net/ethandm/8762osgf/
EDIT: I assume it's related to this release note from v2.5.0:
We have changed the implementation of Vue.nextTick to fix a few bugs (related to #6566, #6690). The change involves using a macro task instead of a micro task to defer DOM updates when inside a DOM event handler attached via v-on. This means any Vue updates triggered by state changes inside v-on handlers will be now deferred using a macro task. This may lead to changes in behavior when dealing with native DOM events.
For more details regarding micro/macro tasks, see this blog post.
For the new implementation, see source code for nextTick.
Now I'm not sure if it's a bug or expected behavior due to the change but will need a solution. Thanks.