Issue with Register Function when input return value only, not a SyntheticEvent.

[gaddamsairam]

Description:
"I'm encountering an issue when using the register function. The problem is that the register function expects a SyntheticEvent, but the Mantine-NumberInput component only returns the value."

Reproduction Steps:

1. Create a form with a Mantine-NumberInput component.
2. Attempt to use the register function to register the NumberInput.
3. Observe the TypeError in the console.
4. TypeError : Cannot read properties of undefined (reading 'name')

With Register:
<NumberInput
{...register('phone_no', {
required: 'Contact details is required',
})}
error={errors.phone_no && errors.phone_no.message}
name='phone_no'
variant='filled'
classNames={{ input: 'text-[18px] bg-transparent border-2 border-white rounded-lg h-11 w-full text-white ', label: 'text-white pb-2', }}
label='Phone No.'
autoComplete='off'
withAsterisk
hideControls
/>

With Controller:
In Controller we have filed.Onchange(e)

"How can we address this scenario when the NumberInput function does not provide a SyntheticEvent?"

Closing Statement:
Thank you for your assistance in resolving this issue. Any help or guidance is greatly appreciated!

[BahaMagi]

Not sure if there is a better way to solve this but we had similar issues with date selects and you can just handle onChange manually

<NumberInput
  /* ...*/
  onChange = {(val: number) => setFormValues<YourDataType>(form, {phone_no: value}, ["phone_no"])}
/>

Where setFormValues is

/**
 * Sets all values of @form of form fields provided in @fields to values of @data 
 * If no @fields are provided, all fields are set. 
 */
export const setFormValues = <
  I extends {[key: string]: any},
>(form: UseFormReturn<I, any, undefined>, data: Partial<I>, fields?: (keyof I)[]): void => {
  const _fields: (keyof I)[] = fields || Obj.keys(form.getValues());
  for(const field of _fields) {
    /**
     * Note: the react-hook-form Path and PathValue types do not support generics so types have to be fixed by [as] assertments
     * See the following github issue for more info
     * https://github.com/react-hook-form/react-hook-form/issues/6726
     */
    form.setValue(field as Path<I>, data[field] as PathValue<I, Path<I>>);
  }
}

[bluebill1049]

use a controller instead.