Skip to content

DevTool control prop does not match Control type output by useForm #223

Description

@kpervin
"@hookform/devtools": "^4.4.0"
"react-hook-form": "^7.58.0"
"@hookform/resolvers": "^5.1.1"

Problem

Currently the typing for DevTool is

export declare const DevTool: <T extends FieldValues>(props?: ({
    id?: string | undefined;
    control?: Control<T, any, T> | undefined;
} & Pick<DevtoolUIProps, "placement" | "styles">) | undefined) => JSX.Element | null;

However, the typing for Control when output by useForm is of form

export type UseFormReturn<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
    ...
    control: Control<TFieldValues, TContext, TTransformedValues>;
    ...
};

The issue is that Control<T, any, T> never ingests the TTransformedValues if set, leading to a typing error.

Proposed Solution

Change the typing for DevTool to the following:

export declare const DevTool: <TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>(props?: ({
    id?: string | undefined;
    control?: Control<TFieldValues, TContext, TTransformedValues> | undefined;
} & Pick<DevtoolUIProps, "placement" | "styles">) | undefined) => JSX.Element | null;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions