search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.4k stars 374 forks source link

Nuxt UI - UInput Type Number - weird behaviour with decimals #1722

Open KazTheCreator opened 3 weeks ago

KazTheCreator commented 3 weeks ago

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 commented 2 weeks ago

Hi @KazTheCreator ,

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

vvadymk commented 2 weeks ago

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 commented 2 weeks ago

@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 commented 2 weeks ago

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

benjamincanac commented 1 week ago

@romhml Any insight on this?

KazTheCreator commented 1 week ago

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 commented 1 week ago

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.