Some 'options' missing from register

[mrigankdoshy]

Problem

According to the docs, onChange is available as an option within register and is used as such:

register('firstName', { 
  onChange: (e) => console.log(e) 
})

However, in our React + TypeScript based project, we do not have access to this. I've also tried updating to the latest version of react-hook-form (7.36.1) but no luck.

Current versions:

"react-hook-form": "^7.11.1",
"react-dom": "^17.0.0",

Trying to use as such:

<TextInput
     required
     label="Name"
     error={errors.name?.message}
     placeholder="Enter a name"
      {...register('name', {
          ...nameRules,
          validate: validateName,
          onChange: (e) => console.log(e)
      })}
/>

Error on line with onChange

Argument of type '{ validate: (value: string) => Promise<string | undefined>; onChange: (e: any) => void; required?: string | ValidationRule<boolean> | undefined; min?: ValidationRule<...> | undefined; ... 8 more ...; shouldUnregister?: boolean | undefined; }' is not assignable to parameter of type 'Partial<{ required: string | ValidationRule<boolean>; min: ValidationRule<string | number>; max: ValidationRule<string | number>; ... 8 more ...; shouldUnregister?: boolean | undefined; }>'.
  Object literal may only specify known properties, and 'onChange' does not exist in type 'Partial<{ required: string | ValidationRule<boolean>; min: ValidationRule<string | number>; max: ValidationRule<string | number>; ... 8 more ...; shouldUnregister?: boolean | undefined; }>'

Available Options

Note: Also missing other options such as onBlur, deps and disabled

These are what are available:

export declare type RegisterOptions<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Partial<{
    required: Message | ValidationRule<boolean>;
    min: ValidationRule<number | string>;
    max: ValidationRule<number | string>;
    maxLength: ValidationRule<number | string>;
    minLength: ValidationRule<number | string>;
    pattern: ValidationRule<RegExp>;
    validate: Validate<FieldPathValue<TFieldValues, TFieldName>> | Record<string, Validate<FieldPathValue<TFieldValues, TFieldName>>>;
    valueAsNumber: boolean;
    valueAsDate: boolean;
    value: FieldPathValue<TFieldValues, TFieldName>;
    setValueAs: (value: any) => any;
    shouldUnregister?: boolean;
}>;

Is there something obvious I'm missing, or need any additional setup? Any help would be appreciated, thank you! :)

[leapful]

@mrigankdoshy : It seems you mis-understand the documentation, "onChange" is a prop of "register" meaning it's included inside the object value returned from called "register".

It was exactly right there in the documentation url https://react-hook-form.com/api/useform/register

Please read the documentation carefully next time and also the source code with typescript definition.

[mrigankdoshy]

@leapful

Thank you for getting back to me!

I was specifically referring to the onChange available as an option, not as a prop on register.

More specifically,

^ This part of the documentation, the one that talks about the available options - similar to maxLength, pattern etc which I do have access to. Since onChange is also listed in this section of the documentation, I figured that it might be available to use as a register option.

I'm not referring to the start of the documentation (props section), to be clear. I indeed have read the documentation, but I could have misunderstood - there's no reason to be snarky in your response, this is a community to learn :)

If you do have additional input, I'd truly appreciate it! Thank you!

[leapful]

@mrigankdoshy : Oh, I see , you're using the new options added for version 7. Could you please share what your typescript version ?

Here is the working codesandbox: https://codesandbox.io/s/register-forked-9g9ene?file=/src/App.js

[leapful]

@mrigankdoshy : If possible, could you please re-produce the issue on codesandbox ?

[mrigankdoshy]

I don't think I can... I wouldn't know how to. Our project is very large and is an actual software used by many people, so it would be very difficult to replicate it on a small scale on codesandbox.

I'm happy to provide more information about our project tho if you have a feeling about why this may be happening.

[leapful]

@mrigankdoshy : Since those new options are added from v7.17, my suggestion is upgrading your react-hook-form to latest version 7.36.1 first then run npm cache clean -f or yarn cache clean (depends on your package manager).

If your project had package-lock.json or yarn.lock, then just remove node_modules and execute npm ci or yarn install again after upgrading react-hook-form version.

[mrigankdoshy]

I've already tried upgrading to the latest version, however, I'll try again in the morning... sometimes it's just luck with these things ;)

Note: since my version is written as:

"react-hook-form": "^7.11.1",

I believe it should already be at the latest version

[mrigankdoshy]

Seems to have worked now, I did the same thing in the past but it hadn't, but now it does. Thank you for your help! Much appreciated!