Best way to prevent NumberField from substituting entered value when it's outside min-max range?

[arzatskis]

As docs say., number inputs snaps to lowest / highest possible value when user enters something out of range:

If the user types a value that is between two steps and blurs the input, the value will be snapped to the nearest step. When incrementing or decrementing, the value is snapped to the nearest step that is higher or lower, respectively.

I get why this happens / it behaves like this, yet the app I'm working on is very data sensitive (medical trials) and changing values automatically is bad thing :)

Haven't got to this yet, but thinking exploring couple approaches for this (not sure if they are viable yet)

• Check what's entered in onKeyDown handler / maybe use sync value with internal useNumberFieldState to get statefor "would be" value, check if it's valid / prevent input if not (not sure, maybe can usestate` from render props without separate one)
• Manually handling minValue / maxValue validation / not pass those to NumberField (hoping I won't need to get to this)

Was wondering, maybe there's better approach to tackle this?

(Ideally, RAC components would have prop to disable this behavior - user could enter whatever and UI would just show validation error for that field)

[snowystinger]

After reading the html number input mdn, maybe we should have a prop to control this. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#max
And let it fail constraint validation like native controls do. I'll bring it up with the team.

For now though, you should be able to handle this by not setting the min/max, use a description to tell people about it, and implement your own validation for it (see link to Forms guide)

[arzatskis]

Thank you @snowystinger 🙇