NumericInput clamping issue

[SquareByte]

Environment

• Package version(s): 5.0.0
• Operating System: Ubuntu Desktop Linux
• Browser name and version: Firefox 115, Chromium 115

Code Sandbox

https://codesandbox.io/s/elegant-easley-rgls9k?file=/src/App.tsx

Actual behavior

NumericInput shows "0" on initial render when passed props stepSize={0.000001} minorStepSize={null} majorStepSize={null} value={0.001} (the latter making it a controlled input).

Then on input focus the desired value suddenly pops up.

Expected behavior

Show the value 0.001.

Possible solution

1. At least NumericInput.roundAndClampValue is broken, because stepMaxPrecision is not passed to toLocaleStrings option argument maximumFractionDigits.

// in getDerivedStateFromProps():
const sanitizedValue = NumericInput.roundAndClampValue(/*value=*/"0.001", /*stepMaxPrecision=*/6, 0, 1, 0, "en")
// sanitizedValue is now "0"

2. Conceptually: as far as I understand it, minor/major/stepSize mix two distinct concerns: UI and data validation. For example: The user cannot control floats of arbitrary precision, and at the same time have a minorStepSize of say 0.01 for convenient input.

[PetrusAsikainen]

I think this is a dupe of #4497?

[SquareByte]

@PetrusAsikainen Yes, looks like it. Thank you.

I didn't recognized it because this issue focused on the button behavior. But the core issue is the same and more general, independent of the buttons. My sandbox has buttonPosition="none" set.

[TheRayTracer]

This is a better dup: #4045