Numeric masks do not work correctly with trailing zeros

[douglasg14b]

Describe the bug

Numeric masks do not work correctly when you can have a decimal point and you are filling the number with zeros, it erases and rewrites input that should not be changed.

Example : ['#.##', '##.##', '###.##', '####.##']

• What is typed -> Result (Expected)
• 100 --> 1.00 (Expected: 1.00)
• 1000 -> 10 (Expected: 10.00)
• 10000 -> 1 (Expected: 100.00)
• 100000 -> 1.0 (Expected: 1000.00)
• 111 --> 1.11 (Expected: 1.11)
• 1111 -> 11.11 (Expected: 11.11)
• 11111 -> 111.11 (Expected: 111.11)
• 111111 -> 1111.11 (Expected: 1111.11)

To Reproduce See above

Expected behavior See above

Screenshots N/A

Desktop

• OS: Windows
• Browser Firefox
• Version 78

As you can see, typing in zeros does not have the same behavior as other numeric values, which is unexpected and seemingly incorrect behavior. This makes it practically impossible to actually write out numeric values that end in multiple zeros with a mask.

[douglasg14b]

Updated to v1.3.1 And the problem is actually worse.

Now zeros do not appear at all, in any fashion.

[RonaldJerez]

I just tried this on the demo page and its working as expected. Your bug report didn't follow the template and is missing key information for me to be able to reproduce it.

I tried this code in the demo page. in both chrome and safari.

let value = ''
let masked = false

<example label="Money">
  <input-facade :mask="['#.##', '##.##', '###.##', '####.##']" v-model="value" :masked="masked" />
</example>

<checkbox v-model="masked" />
<display :value="value" />

[douglasg14b]

More info:

Browser: Firefox Input Type: Vuetify v-text-field

Input markup:

    <v-text-field v-model.number="price" title="Price"
        class="elevate-input" label="Price"
        type="number" v-facade="['', '#','#.##', '##.##', '###.##', '####.##']">
    </v-text-field>    

[douglasg14b]

Maybe it has to do with v-model.number ?

[douglasg14b]

Managed to reproduce working vs non-working.

This occurs when the v-model binding is bound to a number, instead of a string.

So the question now is, how can this work when bound to a numeric value, or can it?

[RonaldJerez]

It shouldn't have a problem with numeric values. the code actually transforms any input to its string equivalent. However you have to realize that in javascript. 1.00 gets transformed to just "1" as an integer. So it really depends on what vuetify is doing to the value when transforming it to an int. If its floating integer then it shouldn't be a problem.

I did however just tried it. it seems to only be happening when using vuetify and in firefox. Vuetify in chrome doesnt have this problem. I'll put some debugging and see if I spot anything. But like you said I think this has to do with the number been transformed into a number and probably loosing the decimal place when transformed.

[RonaldJerez]

I tried again in the demo page without vuetify. just adding v-model.number, and it also has issues there. I then went to look at the vue's docs for v-model.number and it says its done using parseFloat. If you try parseFloat('1.00') on the browser console you'll notice that the browser removes the trailing 0's as 1.00 is the same as 1. So next time around the input will just be getting a 1 as input and loosing. So I dont think theres anything I can do to remediate that.

[RonaldJerez]

Closing as there's really nothing that can be done for this. I will put a comment in the docs to indicate that v-model.number does not work with this plugin as vue gets rid of the 0s when using number.