Vuetify: [Bug Report] Mask not working correctly when typing fast

[aldarund]

Versions and Environment

Vuetify: 1.0.0-alpha.3
Vue: 2.5.11
Browsers: Chrome 63.0.3239.90
OS: Windows 10

Steps to reproduce

If you type fast enough the cursor will remain at the begin of the field and will insert next digit before previous one
https://www.dropbox.com/s/3wcrkla6ifl2tht/2017-12-15_01-09-59.mp4?dl=0
here i typed 1234567 and ended up with 7612345

Expected Behavior

insert next digit after previous one

Actual Behavior

insert next digit before previous one

Reproduction Link

https://codepen.io/aldarund/pen/LeVQBz?&editors=101

Other comments

only when type fast enough

[aldarund]

*happens even when typing not fast
https://www.dropbox.com/s/usmbwz6xhxjlfuy/2017-12-15_02-35-27.mp4?dl=0
Cursor just jump to the begin of the input

[plasmid87]

I can reproduce this issue and I think the cause of this behavior is in maskable.js. https://github.com/vuetifyjs/vuetify/blob/980f04b6b0c82b1a4895b935bffa1cbb5eb19e19/src/mixins/maskable.js#L137

The observed behavior is that when typing quickly, updateRange is called multiple times, but lazyValue may already contain the final value from the keystrokes. e.g., typing 123 really quickly results in updateRange seeing 1, 123, 123. Because of this the final call always resets the cursor position to 0.

Making updateRange immediate (by removing nextTick) appears to solve this problem. Does anyone know what the impact of this change might be? I have a reasonably input-heavy workflow and it doesn't seem to cause any problems (so far) in Chrome, Edge or Firefox.

EDIT: Above was 100% reproducible with 0.17.6, upgrading to 0.17.7 seems to have made the issue more difficult to reproduce (requires extremely fast typing / key mashing)

[maiconpazin]

I am developing a PWA with vuetify and in Android mobile phones using old Chrome versions, this problem is happening all the time. I only can input data in text fields with masks if I digit the characters very slowly.

[aldarund]

This make masked input just unusable at all

[deraw]

I've got a similar issue that is maybe related: when i'm typing on my Android mobile with custom mask, for exemple ##/##/### and typing (slowly) 1409, the result is 14/00/909, this is really strange

[JavierPAYTEF]

I have this issue as well, with an app for mobile. Typing with the mask sometimes duplicates the typed character for some reason, even repeating old typed characters. It's really weird. The site is shown in a webview, so there might be some incompatibility there.

[DarthGandalf]

I'm 100% reproducing this on firefox 65 on android. When mask is AAAA, and I start typing small letters, they are automatically converted to capital letters, but if the first typed letter was autoconverted, at that moment cursor moves to the start of text field. Similarly, when mask is aaaa, and I start with typing a capital letter, cursor also moves to start. However, if I'm typing the same case, so that there is no conversion, the cursor stays where it should. Also this seems to affect only the first letter.

P.S. vuetify 1.5.2, vue 2.6.7

[jacekkarczmarczyk]

masks have been removed in 2.0