kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.27k stars 69 forks source link

[NumberField] Incrementing/decrementing a value with decimals doesn't work correctly for some locales #368

Closed MariusDoe closed 7 months ago

MariusDoe commented 7 months ago

Describe the bug When incrementing or decrementing the value of a NumberField via the respective buttons or the scroll wheel, while using a locale that uses a different decimal seperator than . (e. g. German uses ,), the decimal seperator is removed and the incremented/decremented number is shown as the resulting integer.

To Reproduce Steps to reproduce the behavior:

  1. Set your browser's locale to German.
  2. Restart your browser if necessary.
  3. Navigate to the first example for NumberField.
  4. Enter the text 1,1 (German notation for the number 1.1).
  5. Click the increment button.
  6. The NumberField now shows 21.

Expected behavior The NumberField shows 2,1.

Screenshots Before increment: before increment After increment: after increment

Desktop (please complete the following information):

Additional context After some debugging, I think the problem is in these two lines or rather, their behavior. The first sets the value to the (number) 2.1. The second then tries to format that value. While doing so, it parses the value, where the number 2.1 is treated as a string and passed to the numberParser. That in turn throws away the decimal point, because in German, it's the grouping character (1234.5 is written as 1.234,5). Thus, the format function formats the value 21.

One solution might be to change this line to local.format && typeof value !== "number". That way, if a value is already a number, it doesn't get parsed again. In the bug above, that would mean the number 2.1 is preserved and it should solve the problem. Although I'm not sure whether my proposal breaks other functionality.

Related Problems While testing, I found a very similar problem. I could turn it into its own issue, but I think it's similar enough that it's better to quickly describe it here: When setting rawValue to a value with a decimal point (e. g. 1.1), it gets shown as 11 using the German locale. I think this bug should be fixed by the one-line modification above.