Type error about async validate function

[FuJuntao]

Describe the bug
When passing an async function to register's validate rule, there would be a type error. But dispite the type check result, js could run well.

To Reproduce
Steps to reproduce the behavior:

1. Pass any async function to register's validate rule in tsx file

Typescript message
No overload matches this call.
Overload 1 of 2, '(validateRule: Partial<{ required: string | boolean; min: string | number | { value: ReactText; message: string; }; max: string | number | { value: ReactText; message: string; }; maxLength: string | number | { ...; }; minLength: string | ... 1 more ... | { ...; }; pattern: RegExp | { ...; }; validate: Validate | ... 1 more ... | { ...; }; }>): (ref: any) => void', gave the following error.
Type '(value: any) => Promise<"Please enter less than 3 letters" | undefined>' is not assignable to type 'Validate | Record<string, Validate> | { value: Validate | Record<string, Validate>; message: string; } | undefined'.
Type '(value: any) => Promise<"Please enter less than 3 letters" | undefined>' is not assignable to type 'Validate'.
Type 'Promise<"Please enter less than 3 letters" | undefined>' is not assignable to type 'ValidateResult'.
Type 'Promise<"Please enter less than 3 letters" | undefined>' is not assignable to type 'void'.
Overload 2 of 2, '(ref: ElementLike | null, validationOptions?: Partial<{ required: string | boolean; min: string | number | { value: ReactText; message: string; }; max: string | number | { value: ReactText; message: string; }; maxLength: string | ... 1 more ... | { ...; }; minLength: string | ... 1 more ... | { ...; }; pattern: RegExp | { ...; }; validate: Validate | ... 1 more ... | { ...; }; }> | undefined): void', gave the following error.
Argument of type '{ required: string; validate: (value: any) => Promise<"Please enter less than 3 letters" | undefined>; }' is not assignable to parameter of type 'ElementLike'.
Object literal may only specify known properties, and 'required' does not exist in type 'ElementLike'.

Additional context
Maybe it's because type Validate in src/types.ts isn't defined properly?

[FuJuntao]

"react-scripts": "3.2.0",
"typescript": "3.6.4",
"react-hook-form": "^3.23.18",

[bluebill1049]

Can u put together a codesandbox? So we can easily reproduce?

[FuJuntao]

Can u put together a codesandbox? So we can easily reproduce?

Yes, of course. Here is the codesandbox link.

[bluebill1049]

thanks for the codesandbox link :) this is fixed and will be patched in the release <3

[JJ-DiazBaquero]

This issue is not completely solved, we still got an error when using an async function that returns either a string or a boolean, the type Promise<string | boolean> might be missing for ValidateResult :)

[bluebill1049]

export type ValidateResult =
  | string
  | boolean
  | void
  | Promise<string>
  | Promise<boolean>;

hey @jj-diaz1067 that's what we have right now. I guess it should work, feel free to send a PR if you have the solution.

[bluebill1049]

close again :) feel free to submit a PR or let me know why it's not working for you. @jj-diaz1067