[numberfield] `onEdgeReached` prop

[michaelhazan]

Feature request

Summary

have a onEdgeReached prop on NumberField.Root when reaching the provided min / max and attempting to go below / above it.

Examples in other libraries

unsure if this is a thing in other libraries

Motivation

In my use case i simply wish to trigger a certain action when reaching the minimum / maximum of the component, for example clearing it, or changing another form value.

[mj12albert]

Does onValueChange work for your use-case like this?

<NumberField.Root
  onValueChange={(newValue) => {
    if (newValue >= max) {
     // your logic
    }
  }}
/>

[michaelhazan]

Does onValueChange work for your use-case like this?

<NumberField.Root
onValueChange={(newValue) => {
if (newValue >= max) {
// your logic
}
}}
/>

not necessarily, for example in my use case, i want to clear the input and another input the moment the user attempts to go below 1, but if i use this logic:

// ..const min = 1;
<NumberField.Root
  onValueChange={(newValue) => {
    if (newValue < min) {
     // clearing the number field..
    }
  }}
/>

it will cause each attempt to use the up arrow on the (empty) number field to not work, causing u to do something like so:

// ..const min = 1;
// ..const [internalValue, setInternalValue] = useState();
<NumberField.Root
  value={internalValue}
  onValueChange={(newValue) => {
    if (newValue < min && internalValue) {
        // clearing the number field and return..
    } else if (!internalValue) { 
        newValue = min; // We need to set the value to be min...
    }
    setInternalValue(newValue);
  }}
/>

which feels unnecessarily complicated for simple use cases, and stops you from using the min max props for externally doing the same thing..

[michaelhazan]

@mj12albert would like ur opinion on this (or anyone from the team 😅).
wouldn't mind implementing a draft that does this

[mj12albert]

@michaelhazan Is this what you're trying to do? https://stackblitz.com/edit/3gvuvzef?file=src%2FApp.tsx

Just wanna see how far you can in userland with this

[michaelhazan]

@mj12albert yes!

another example could be https://stackblitz.com/edit/3gvuvzef-q719ufzg?file=src%2FApp.tsx