NumberInput min and max type error

[flat elk]

Quite confused by this one - I'm trying to set the min and max props for NumberInput with an integer value and seeing the following error:

src/components/Survey/BloodPressureForm.tsx:19:7 - error TS2322: Type 'string | number' is not assignable to type 'number | undefined'.
  Type 'string' is not assignable to type 'number'.

19       min={20}
         ~~~

Clearly 20 is of type number, not string | number. Any thoughts here?

if it matters, I'm seeing this error both with version 7.11.2 and 7.14.3. As far as I can tell, Mantine has this typed properly... just not sure why a number is being interpreted as something different.

oh, I think this is actually being caused by the field registration with react-hook-form... nevermind!

[flat elk]

Ok so even though it is a react-hook-form issue in principle, I’m unfortunately unable to use the clamp=“strict” option which is really what I want here. The issue is that the min and max props conflict with react-hook-form.

Anyone know of a workaround for this?

Oddly, clamp=“blur” does work, but it’s just not the behavior I’d like

[candid fulcrum]

What is the issue exactly? Does react-hook-form override your values or it does not allow you to fully control the value?

[flat elk]

It doesn’t allow me to fully control the value. I can set min and max on NumberInput just fine, but if I use clamp=“strict” then I can’t enter any values into the input. “none” and “blur” work as expected. I’ll create a code sandbox when I have a moment

[flat elk]

https://codesandbox.io/p/sandbox/nice-tamas-7q5pkp?file=%2Fsrc%2FApp.tsx%3A72%2C13

[candid fulcrum]

It is not related to rhf, when you set min={20} and max={200} with clampBehavior="strict" you can enter values correctly based on your sandbox. For example, you can paste number 59 into the field. You cannot enter numbers that are smaller than 20 and larger than 200, this includes value 5 which is required to input 59 with keyboard.