[react-wrappers] useRef doesn’t return the current element

[dutchcelt]

When using useRef to get the current element I get always get an empty object when referencing from a React Wrapper element.
I encountered this on a project I’m working on and could replicate it with the react-wrapper demo in the cem-tools repo.

I adapted the App.tsx file to reproduce the bug. Or, what I think is a bug. Could it be a timing issue?

demo/react-app/src/App.tsx

import { useState, useRef, useEffect } from "react";
import "./App.css";
import { MyButton } from "lit-app/dist/react";

function App() {
  const [count, setCount] = useState(0);
  const myButtonRef = useRef(null); // <-- initialValue is null

  const counter = () => {
    console.log(myButtonRef.current); // <-- logs `{}`
    setCount((count) => count + 1);
  }

  useEffect(() => {
    console.log(myButtonRef.current); // <-- logs `{}`
  },[]);

  return (<MyButton ref={myButtonRef} onClick={counter}>
    count is {count}
  </MyButton>);
}

export default App;

Note: Replacing <MyButton> with <my-button> makes the issue go away and ref={myButtonRef} returns the Custom Element.

[dutchcelt]

It looks like this fix (appropriated from the Lit react wrapper) should work.

const refUseCallback = React.useCallback(
  (node) => {
    forwardedRef.current = node;
    if (typeof ref === 'function') {
      ref(node);
    } else if (ref !== null) {
      ref.current = node;
    }
  },
[ref]
);

return React.createElement(
  ${getTagName(component)},
  {
    ${useEffect ? `ref: refUseCallback,` : ""}
    ${has(unusedProps) ? "...filteredProps" : "...props"},
    ${[...attrTemplates, ...booleanAttrTemplates].join(",")},
    style: {...props.style},
    ${globalEvents.map((x) => `${x.event}: props.${x.event}`).join(", ")}
  },
  props.children
);

I'll do some testing and create a PR.

[dutchcelt]

The only problem here is that React's useImperativeHandle removes the ability to return the current node. As this is a common use-case for useRef we may need a way to opt out of running useImperativeHandle.

${
  config.withImperativeHandle
    ? `useImperativeHandle(forwardedRef, () => ({
        ${has(methods) ? `${getPublicMethodsForRef(methods)},` : ""}
        customElement: ref.current
      }));`
    : ""
}

This example also provides useImperativeHandle with a reference to the node by adding a property: customElement: ref.current.

exampleRef.current.customElement // returns the node

And where config.withImperativeHandle is false the ref would work as it normally would using the example in the previous comment.

[dutchcelt]

Added a PR #167