NumberInput triggers change event with prefix or suffix in currency and percent format.

[IvanKalinin]

Description

The NumberInput component triggers a change event with a prefixed or suffixed value when the format style is currency or percent. This makes it way harder to validate and parse form values, as we always have to remember to parse the percent or currency value into a number. And it complicates controlled input implementation. Also increases the chance of sending invalid data in a request.

I think a change event should always provide the raw value.

Technically, we could take a value from the details.valueAsNumber, but in that case, the controlled input will never be formatted. Also, we have to control a few edge cases, like an empty string, and always convert a number into a string; otherwise, a number in the value will crash the app with value.replace is not a function error. Also, for some reason, the percent style is the number divided by 100

In addition, I just accidentally discovered another bug. You cannot enter certain numbers, such as 414. The formatter will result in 413.99999999999994

Anyway, for the main issue, I've implemented a minimal reproduction code, and compared the behavior with mantine (and probably all of the major component libraries), where the form holds a clean value, but the input shows the expected format

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/sandbox/ark-ui-number-input-cdmpxv

Steps to Reproduce

1. Enter any number in the NumberInput
2. Blur
3. See the state holds a formatted value, rather than a clean number

Ark UI Version

5.26.1

Framework

• React
• Solid
• Vue
• Svelte

Browser

any

Additional Information

No response

[segunadebayo]

This was an intentional design decision. Can you a realistic reproduction of the issue you described earlier?

I believe you can solve this without having to control the component or handle any extra complexity.

[IvanKalinin]

I have prepared a rough code example for 2 use cases, where it requires additional parsing of the values back and forth, which is a straight road to many bugs in the app.
Consider that the backend accepts and returns raw numbers, without formatting.
Play with the form and see inconsistency with values, when raw numbers change into formatted on input change, but remain raw in default values, and the result object must contain only raw numbers.

https://codesandbox.io/p/devbox/xkhh56