NumberInput sets value to 0 when first character (i.e. "1"), is deleted (in "1000" value)

[ivanjuric]

What package has an issue

@mantine/core

Describe the bug

When editing existing value, i.e. 1000, if we delete only first number, in this example 1, when trying to change it to 2000, whole value is set to 0, and caret stays at 0 index. Then we enter desired value (2) and final value in input is 20 instead of leaving 000 in first step, resulting with 2000 as expected final value.

Example of actual behavior:

Example of expected behavior from previous versions (this is Mantine v6, before react-number-format):

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.0.2

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

[ShaifArfan]

I guess this is expected behavior if your initial value is a number. You can set initial value as string to achieve this behavior.
But right now, even if you set the initial value as string, the returned value from the component will be a number.

A possible fix could be, if the type of the value is number then use payload.floatValue otherwise we can use payload.value which will be a string.

  const handleValueChange: OnValueChange = (payload, event) => {
    setValue(
      typeof _value === 'number' && isValidNumber(payload.floatValue)
        ? payload.floatValue
        : payload.value
    );
    onValueChange?.(payload, event);
  };

@rtivital what you think?

[rtivital]

Sounds right, you are welcome to submit a PR with a fix (if it is needed)

[ivanjuric]

Hi, thank you for the fix!

However, there are still left some cases that are not covered by this fix.

For example, if you look at this case in v7: https://mantine.dev/core/number-input/#thousand-separator, you'll see it's setting the value again to 0.

But (almost the) same example from v6 (https://v6.mantine.dev/core/number-input/#decimalthousands-separator) works fine and leaves zeroes until focus is moved from input.