Number input min/max can be bypassed by entering "0" first

[owenmoogk]

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.13.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Go to a NumberInput and set a max of 40. Type in 072, then focus away. Notice how it sets the value to 72, which shouldn't be.

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

https://mantine.dev/core/number-input/

Possible fix

Self-service

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

[MariaBanaszkiewicz]

Hi! I would like to fix this issue if no one else is working on it :)

[rtivital]

You are welcome to submit a PR with a fix

[buchananwill]

I had a similar issue, which I circumvented like this:

<NumberInput 
clampBehavior={'strict'} 
label={'Cycle Length in Weeks'} 
min={1} 
max={52} value={field.value}
onBlur={(blurAction) => { blurAction.currentTarget.value = String(field.value); }} 
onChange={(value) => field.onChange(isNumber(value) && value > 0 ? value : 1) } 
/>

Apparently it's derived from an issue with react-number-format.

(This was embedded in a react-hook-form controller.)

[trananhvan1102vn]

It's only missing the clamp min max when it trim the leading zero. Since there is no pull request related, I can create one if you need.

[MariaBanaszkiewicz]

Hi! I would like to fix this issue if no one else is working on it :)

as the fix is already provided I have instead taken care of other issue