Skip to content

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

@kpervin

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions