Videos
I have updated this ticket: https://github.com/primefaces/primereact/issues/2547
I think there needs to be showcase example on how to use InputNumber with React Hook Forms if it is not straightforward like you are seeing.
Edit 07/30/2022: I have it working and here are two examples:
Price example must be between 0 and 250,000.
<Controller name="price" control={control} rules={{ required: 'Price is required.', min: 0, max: 250000 }} render={({ field, fieldState }) => (
<>
<label htmlFor={field.name} className={classNames({ 'p-error': errors.price })}>Price*</label>
<InputNumber id={field.name} ref={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} mode="currency" currency="USD" locale="en-US" inputClassName={classNames({ 'p-invalid': fieldState.error })} />
{getFormErrorMessage(fieldState)}
</>
)} />
Year example must be between 1970-2030:
<Controller name="year" control={control} rules={{ required: 'Year is required.', min: 1970, max: 2050 }} render={({ field, fieldState }) => (
<>
<label htmlFor={field.name} className={classNames({ 'p-error': errors.year })}>Year*</label>
<InputNumber id={field.name} ref={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
{getFormErrorMessage(fieldState)}
</>
)} />
I encountered the same issue when working with Primereact InputNumber and Formik.
In my case the reason for unexpected behavior of InputNumber component is primereact custom onChange method of InputNumber:
onChange?(e: InputNumberChangeParams): void
interface InputNumberChangeParams {
originalEvent: React.SyntheticEvent;
value: number | null;
}
(Compared to InputText onChange property: onChange?: ChangeEventHandler<HTMLInputElement> | undefined )
formik.handleChange(e) expects e: React.ChangeEvent<any> which means I can't pass (e: InputNumberChangeParams) to the function. The solution for me was to use another function to handle the change and work only with e.value which is provided by InputNumber onChange method.
onChange={(e): void => {
formik.setFieldValue("fieldName", e.value);
}}