Controlled NumberInput is not controlled actually

[rtatarinov]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

None

Describe the bug

Actually, NumberInput is not controlled.

The example

const [value, setValue] = useState<string | number>('');

const onInputChange = (val: string) => {
  if (val.lengtth <= 4) {
    setValue(val);
  }
}

return <NumberInput value={value} onChange={val => onInputChange(String(val))} />;

You can also check codesandbox
When developer tries to control input value using state it doesn't work properly. Internal NumberInput state continue update fully ignoring the value, provided outside

The expected behavior
In the example above value of number input shouldn't update and it should equal value from state

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/vigilant-bas-z6xscm

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

It is an issue with react-number-format, see – s-yadav/react-number-format#749
Currently, it is not possible to resolve this issue. Once this is fixed in react-number-format@6, it will be updated in @mantine/core package.