mantine icon indicating copy to clipboard operation
mantine copied to clipboard

Controlled NumberInput is not controlled actually

Open rtatarinov opened this issue 5 months ago • 1 comments

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

rtatarinov avatar Sep 09 '24 16:09 rtatarinov