probil / v-mask

🔡 Tiny input mask library for Vue.js (directive)

Home Page:https://v-mask-demo.netlify.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug when replacing through selection #1

TiTUS-web opened this issue · comments

V-Mask and Vue versions

2.2.4, 2.6.11

Reproduction Link

https://codesandbox.io/embed/inspiring-babbage-gwmzph?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

  1. Make sure '###' is used in the mask;
  2. Enter the numbers in the input box, for example, '123'.
  3. Select 3 with the mouse selection;
  4. Enter any letter instead of 3;
  5. Detect an error;

What is Expected?

It was expected that the entered value, instead of 3, should not be displayed in input.

What is actually happening?

The entered value is not masked in any way.

Why can this happen ?

In the v-mask sources, there is a method updateValue() in which we get the entered value and check it in order to change it later. There are 3 conditions in the check: isValueChanged, isLengthIncreased and isUpdateNeeded, which is a resultant check of previous conditions.

The whole problem is in the condition isLengthIncreased, when we enter a value, it checks that if the current value length is greater than the previous value length, then the condition is true, otherwise false. And if the value is false, the condition isUpdateNeeded, which checks all conditions for true, also fails and is false, and the value does not change in any way.

This problem is fixed when we remove the condition isLengthIncreased !

image-1
image-2