Nuxt UI - UInput Type Number - weird behaviour with decimals

[KazTheCreator]

Description

Hey! Im using an UInput type number and encountered something strange. It is not possible to write the number "1.04" or "0.06". The culprit seems to be the "0" after the ".". Further example of working decimal: "1.14", 1.56" It works fine if you use "," as a comma but my mobile phones number keyboard only provides ".".

The same behvaiour can be tested here: https://ui.nuxt.com/components/input

Im using Mac and Chrome to test.

Let me know what you think! :)

[moshetanzer]

Hi @KazTheCreator ,

Seems to be working fine on my side. What device are you using?

[vvadymk]

Hi! I have the same behavior. When I add decimal with '.' and the first 0 after the '.' the zero is cut of, but as it is described with ',' it works good.

I use Mac and Brave.

[moshetanzer]

@KazTheCreator @vvadymk Yeah. Got it will try submit a PR to fix. Think it has to do with the 'looseNumber' function. @benjamincanac any input? Should I just add a check to only convert to number if doesn't start with 0? It seems a bit complex unless we remove this?

[KazTheCreator]

Thank you guys! If you need further information from me - tell me! :)

[benjamincanac]

@romhml Any insight on this?

[KazTheCreator]

Hey! I dont really know if it helps but anyway. https://ui.nuxt.com/components/input#type

if you enter 0 then :model-value="0" as soon you enter the dot (0.) then :model-value=""

"0," is behaving fine.

[romhml]

I think I found the culprit:

https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue#L194

The looseToNumber function uses parseFloat which replaces 1.0 or 1,0 to 1. Here's a few tests from the node console:

> parseFloat('1,0')
1
> parseFloat('1.0')
1
> parseFloat('1.01')
1.01

We need to tweak the function to preserve the .0 as the user is typing. Might be related to https://github.com/vuejs/vue/issues/11989 and https://github.com/vuejs/vue/issues/7136 too.

[Nyantekyi]

I am facing a similar problem. I am creating a way for sales transactions to be received. I am using a Mac and safari. <UInput type="number" v-model="state.amount" /> and I get this error 'Enter a valid value' when a decimal is entered

[Nyantekyi]

Hey... I figured out a work around to this problem... This is how my code looks like now and the only difference is that I added step=0.01
<UInput type="number" v-model.number="state.amount" step="0.01" />