preact icon indicating copy to clipboard operation
preact copied to clipboard

Types for props in h / createElement function doesn't allow ref

Open oliverfindl opened this issue 1 year ago • 2 comments

  • [ ] Check if updating to the latest Preact version resolves the issue.

Describe the bug: h / createElement function doesn't allow ref in props, although code compiles successfully.

To Reproduce:

// DummyComponent.tsx

import { FunctionalComponent, h } from "preact";
import { useRef } from "preact/hooks";

const DummyComponent: FunctionalComponent = ({ children }) => {
    const node = useRef<HTMLDivElement>();
    return h("div", { ref: node }, children);
});

export default DummyComponent;

Error in VS Code: Type 'MutableRef<HTMLDivElement | undefined>' is not assignable to type '(Ref<EventTarget> & Ref<SVGElement>) | undefined'.

Expected behavior: No errors.

oliverfindl avatar Jul 14 '22 16:07 oliverfindl

~~I believe createRef is for classes, useRef is what you need in a functional component. The hooks docs mention making sure not to mix up createRef and useRef but maybe the ref docs could too.~~

Nevermind, it should at least accept the type in that scenario

mikerob215 avatar Jul 14 '22 20:07 mikerob215

Hello,

sorry, this was an oversight at my end. Updated my first post to useRef hook. Unfortunately, it does not solve this issue.

Error: Type 'MutableRef<HTMLDivElement | undefined>' is not assignable to type '(Ref<EventTarget> & Ref<SVGElement>) | undefined'.

Thanks.

oliverfindl avatar Jul 14 '22 20:07 oliverfindl