Skip to content

ForwardedRef not assignable to ref type #2753

@jeremy-flusin

Description

@jeremy-flusin

Issue description

Hi there,

When trying to use a forwarded ref with the component, I encountered the following TypeScript error:

TS2769: No overload matches this call.

Overload  1  of  2 ,  (props: Props | Readonly<Props>): ReactSVG , gave the following error.
Type  ForwardedRef<HTMLDivElement>  is not assignable to type
((string | ((instance: ReactSVG | null) => void) | RefObject<ReactSVG>) & ((string | ((instance: HTMLWrapperType | null) => void) | RefObject<...>) & (string | ... 1 more ... | RefObject<...>))) | null | undefined

Overload  2  of  2 ,  (props: Props, context: any): ReactSVG , gave the following error.
Type  ForwardedRef<HTMLDivElement>  is not assignable to type
((string | ((instance: ReactSVG | null) => void) | RefObject<ReactSVG>) & ((string | ((instance: HTMLWrapperType | null) => void) | RefObject<...>) & (string | ... 1 more ... | RefObject<...>))) | null | undefined

Reproducer

I've created a CodeSandbox demonstrating the issue.

Attemped workaround

I tried to change the ForwardedRef type to HTMLDivElement, HTMLSpanElement or SVGSVGElement with no success.
With type assertion ref={ref as any} compilation works fine, and the runtime behaviour is as expected.

Thank you for your time and attention to this matter.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions