vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.71k stars 6.95k forks source link

[Bug Report][3.5.8] strange behaviour on v-text-field type number #19412

Open crisleiria opened 6 months ago

crisleiria commented 6 months ago

Environment

Vuetify Version: 3.5.8 Vue Version: 3.4.21 Browsers: Chrome 122.0.0.0, Google Chrome OS: Windows 10

Steps to reproduce

text field with type number and v-model.number. I want v-model to return numeric value.

If you input 24.05 (zero after .) it removes the dot and 0 input. with comma no problems.

Please check if play ground.

Expected Behavior

not remove dot and 0 input

Actual Behavior

removes dot and 0 input if you input for example 24.05 (0 after dot)

Reproduction Link

https://play.vuetifyjs.com/#...

b-maslennikov commented 6 months ago

it's expected behaviour I think

24. and 24.0 are equal to 24 just don't blur the input after . or 0 if you want to have 24.05 value

PS: comma is not valid symbol in numeric value

crisleiria commented 6 months ago

On the playground link, I have an regular input with same vue conditions (v-model.number with type=number and step="0.01" defined).

The expected behaviour should be the same of the regular input. If I have step of 0.01, I want to be able to define 24.05 value. The current behaviour is strange. I have notice, if I remove the type="number", no problems.. but value is a string.

PS: I dont have any blur logic here, input is clearing .0 caracteres from the text input without any focus out event.

b-maslennikov commented 6 months ago

image I can specify 25.04 value...

latest versions of edge, firefox

crisleiria commented 6 months ago

Yes, me too,

if you input 24.5 you are able to place the 0 before dot.

Clear the input and start from begginning, you will see.

PS: Chrome and Firefox have issue. Edge no problem.

jacekkarczmarczyk commented 6 months ago

PS: comma is not valid symbol in numeric value

image

It may be valid, depends on the locale. If the reproduction works for you and for the OP then you probably have set different locale

b-maslennikov commented 6 months ago

I don't have this issue. I'm entering the value digit by digit check the video https://streamable.com/0u0ax5

crisleiria commented 6 months ago

Can be something locale related..

I am placing 24.05, but after I write 0, it is cleared.

https://www.loom.com/share/4cabd1ea65294f70a2876211717bbe18?sid=2ee8fd2d-86ab-4954-9a7d-7d0e32a85a2c

Some users have reported this, it is not only on my machine. You can close the issue, if something changes, I will let you know.

b-maslennikov commented 6 months ago

Now I see Looks like an issue...

JulianPinzaru commented 4 months ago

I have the exactly same issue. Additionally, when I have a custom slot used within v-text-field, it discards the dot "." when typing in a number with decimal point https://play.vuetifyjs.com/playgrounds/rQqFgA

Please check it out by typing i.e: 4.5 in the first input and then same 4.5 in the second input that doesn't use the slot and notice the different behavior. More than that, I noticed that v-text-field starts working as expected when I comment out / remove the v-form wrapper around those two text fields regardless of using or not using slots.

Someone reported a similar issue here: https://github.com/vuetifyjs/vuetify/issues/18433

JulianPinzaru commented 3 months ago

After a month or so someone said a newer version of Vuetify (3.6.10) addressed the issue so I tried it out and I can tell the bug is still there.