mantine
mantine copied to clipboard
Controlled NumberInput is not controlled actually
Dependencies check up
- [X] 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