Allow validationOptions?: ValidationOptions in FormContextValues['register']

[JoshuaKGoldberg]

Is your feature request related to a problem? Please describe.
I'd like to be able to call register with a validationOptions parameter of type ValidationOptions | undefined.

import React from 'react';

const exampleInput = (validationOptions?: ValidationOptions) => {
  return <input ref={register(validationOptions)} />;
}

However, in TypeScript's strict type checking mode, this gives an unhappy complaint:

src/index.tsx:27:21 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Partial<{ required: string | boolean | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ValidationValueMessage<...>; ... 5 more ...; validate: Validate | Record<...>; }> | undefined' is not assignable to parameter of type 'Partial<{ required: string | boolean | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ValidationValueMessage<...>; ... 5 more ...; validate: Validate | Record<...>; }> | ... 4 more ... | null'.
      Type 'undefined' is not assignable to type 'Partial<{ required: string | boolean | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ValidationValueMessage<...>; ... 5 more ...; validate: Validate | Record<...>; }> | ... 4 more ... | null'.

4  return <input ref={register(validationOptions)} />;
                               ~~~~~~~~~~~~~~~~~

  ../../node_modules/react-hook-form/dist/contextTypes.d.ts:12:5
    12     register<Element extends FieldElement = FieldElement>(refOrValidationOptions: ValidationOptions | Element | null, validationOptions?: ValidationOptions): ((ref: Element | null) => void) | void;
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The last overload is declared here.

This is because register's first two overloads say that you can either have no validationOptions or a defined validationOptions:

export declare type FormContextValues<FormValues extends FieldValues = FieldValues> = {
    register<Element extends FieldElement = FieldElement>(): (ref: Element | null) => void;
    register<Element extends FieldElement = FieldElement>(validationOptions: ValidationOptions): (ref: Element | null) => void;

I.e. you may not have an undefined validationOptions.

Describe the solution you'd like
Could we make that second overload allow ?: ValidationOptions?

-    register<Element extends FieldElement = FieldElement>(validationOptions: ValidationOptions): (ref: Element | null) => void;
+    register<Element extends FieldElement = FieldElement>(validationOptions?: ValidationOptions): (ref: Element | null) => void;

Describe alternatives you've considered
In my code, I could do something like validationOptions ? register(validationOptions) : register(), but that's a little less clean than calling directly.

Additional context
You can see a real life code example in https://github.com/Codecademy/client-modules/pull/852 ✨

[bluebill1049]

we need more details on this one, can you supply a codesandbox?

[bluebill1049]

@kotarella1110 looks like our register type is mismatching with useForm and useFormContext

[kotarella1110]

@bluebill1049 I think we just need to fix the overload as follows:

react-hook-form/src/types.ts

Lines 290 to 295 in 8bfbc05

	register<
	Element extends FieldElement<FormValues> = FieldElement<FormValues>
	>(): (ref: Element | null) => void;
	register<Element extends FieldElement<FormValues> = FieldElement<FormValues>>(
	validationOptions: ValidationOptions,
	): (ref: Element | null) => void;

-  register<
-    Element extends FieldElement<FormValues> = FieldElement<FormValues>
-  >(): (ref: Element | null) => void;
-  register<Element extends FieldElement<FormValues> = FieldElement<FormValues>>(
-    validationOptions: ValidationOptions,
-  ): (ref: Element | null) => void;
+  register<Element extends FieldElement<FormValues> = FieldElement<FormValues>>(
+    validationOptions?: ValidationOptions,
+  ): (ref: Element | null) => void;

Do we need to apply this fix to both V5 and V6?

[JoshuaKGoldberg]

Hmm, I can't get Codesandbox to surface strict null checking errors from TypeScript for some reason, but here's a link with the code that should surface complaints: https://codesandbox.io/s/react-hook-form-useform-template-j0zen?file=/src/index.tsxa