NumberField, don't allow blank

[vincerubinetti]

I'd like to use just the Components and not the useNumberField hook (I'm building a design system to be used by people who aren't frontend developers, and I want it to be simple as possible).

When onChange fires, I see that the value will be clamped between min and max. But I don't see any option that will force a blank/empty/NaN back into a valid value range, e.g. setting value back to min. I want my component to always be set to a valid number.

Is there any way to accomplish this with any of the existing component props or validation behavior, and without duplicating the value state in my wrapper component.

It'd be cool if the onChange function could return a number as a validated/"sanitized" value to update the internal numberfield state with.

[vincerubinetti]

Okay, I was able to do this with the (undocumented) render props for the component:

// my wrapper component. needs to support controlled or uncontrolled.
<NumberField
  minValue={min}
  maxValue={max}
  step={step}
  defaultValue={value ?? min}
  value={value}
  onChange={onChange}
>
  {({ state }) => (
    <>
      <Label>{label}</Label>
      <Group>
        <Button slot="decrement">-</Button>
        <Input
          form={form}
          onBlurCapture={(event) => {
            if (!event.target.value.trim())
              state.setInputValue(String(min));
          }}
        />
        <Button slot="increment">+</Button>
      </Group>
    </>
  )}
</NumberField>

This seems to make sure the onChange event is never called with a NaN value. I think theoretically the react-aria internal state is never NaN either, and I believe this should make the change before any FormData picks up the value (since onBlurCapture should fire before the onClick to a submit button).

[snowystinger]

Couldn't you just control the state from the component you're creating? https://codesandbox.io/p/sandbox/holy-shape-frh96k

[vincerubinetti]

I am writing a component library for people who are not frontend developers. My primary goal is to maintain code maintainability, and reduce complexity. Your solution works, but doesn't meet my goals. It would also require more lines to allow the wrapper component to be controlled/uncontrolled, support defaultValue, etc. (duplicating what is already being done by RAC under the hood, which I don't prefer). I think this is a common enough case that RAC should support it easily without duplicating state. I believe the solution I found is preferable. Ideally I think this would be an option in the NumberField component. But in lieu of that, I think it'd be good to document the render props, including setInputValue and an example of what it would be useful for.

[snowystinger]

I updated it to support both value and defaultValue.
The only line to change was let [value, setValue] = useState(props.value ?? props.defaultValue);
Does that meet your goal?

[vincerubinetti]

Thank you for responding. It still would need some modifications. E.g., if props.value changes, the local useState value won't update.

I appreciate your help, but I don't need you to keep updating your example. Again, I need to ruthlessly cut down on complexity (including state duplication/syncing, a common source of bugs) and lines of code due to who will be maintaining it in the future; it's not an issue of me not knowing how to achieve these things.

I'd consider my onBlurCapture solution to be the best for my needs, and can be marked as accepted.

I would still recommend adding documentation somewhere for the render props.