how to trigger onChange without blurring the input with useNumberField ?

[chrisdattruong]

The default behavior of useNumberField is to trigger onChange when the user types a value and then blurs the input. Is there a way to make useNumberField behave like useTextField, where each keystroke triggers onChange immediately ?

[snowystinger]

Hey, I think this issue discussion will answer your question #1674

If you must know every character change to the field, you could always hook up onKeyDown or onKeyUp. This will give you every keystroke though, so if you rely on it, you may get something different than what is in the field. It's possible we could consider exposing onInputChange or something like ComboBox does https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#props

What is your use case so we have more information if we want to consider a change?

[chrisdattruong]

Thank you @snowystinger , this discussion #1674 answered my question.

Im currently having 2 use cases:

1. Having multiple number field inputs and calculate the total in "real-time", similar to this comment
2. Using with react-hook-form to disable/enable the "submit" button when the user starts typing/changing the value

I will find a way to work around the second use case, but for the first use case, it seems impossible since the useNumberField triggers like the onBlur event.

It would be nice to have an "onChange" function that behaves like a regular "onChange". As you mentioned, exposing an onInputChange.

[snowystinger]

Thanks for the details. I don't think that an onInputChange would work for your case. As it would be an unparsed string, so you'd need to recreate all the parsing we do and you'd run into the same issues with partial validation. Maybe there is a more intuitive way to tell the numberfield that the number is ready. Such as committing the value on "Enter" in addition to onBlur?

[mathieu-lessard]

committing the value on "Enter" in addition to onBlur

I'd love this feature.

As a work around, my users have been using tab to trigger the onChange.

[devongovett]

Seems reasonable to me, but in the mean time if you're using the hooks, you could call state.commit() in an onKeyDown handler that you add to the input yourself.