Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[nehiro]

Hi. Could you tell me how to solve the content of the title?

version 7.19.5

<Controller
    name="name"
    control={control}
    defaultValue={reviewedRef?.name}
    render={({ field }) => <SwitchButton {...field} />}
/>

export type Fields = {
  value: boolean;
  onBlur: () => void;
  onChange: (value: boolean) => void;
   // ref: Ref<HTMLButtonElement>;
};

const SwitchButton = React.forwardRef(({ ...field }: Fields, ref: LegacyRef<HTMLButtonElement>) => {
    return (
      <Switch
        checked={field.value}
        onBlur={field.onBlur}
        onChange={field.onChange}
        ref={ref}
      >
      ......
      </Switch>
    );
  }
);

export default SwitchButton;

I tried using React.forwardRef with reference to other people's problems, but the error still appears.
However, when I change the ref of Switch to the one obtained from field (ref = {field.ref}), no error occurs.
Looking forward to hearing from you.

[Moshyfawn]

Can you provide a simple codesanbox with the used Switch component to help us debug your issue?

[Moshyfawn]

Here's a working example with MUI Switch component (which, I presume, you're using) without the warning

[nehiro]

Thank you for reply. I've never used Codesandbox, so please wait a little longer.
Sorry. I'm using a Headless UI.
https://headlessui.dev/react/switch

[Moshyfawn]

No worries. Let me see if I can quickly replicate a working example with the HeadlessUI Switch component instead

[nehiro]

https://codesandbox.io/s/tailwind-css-and-react-forked-zlci9y?file=/src/App.js

Sorry I made you wait. It doesn't look good, but when I click the button, I get a similar error on the console.
Verification please.

[Moshyfawn]

No problem! ;)
Take a look at my comment below with an example proving a custom button element

[Moshyfawn]

Alright, first, I should say that I've never used Headless UI in production, so I'm not aware of all the quirks of the library (which I see many of lol).

Now, the Switch component does expose the ref prop, which doesn't get.. forwarded (?) to the button component that is the default component rendered if not altered via the as prop. I don't have time to actually look into the implementation, sadly.

I've managed to hack together a working example by providing my own button element as a child of the Switch component. I've added as={Fragment} to avoid rendering the default button component Headless UI provides. All the a11y button attributes are propagated to the newly provided button element, which you can pass your ref freely to.

Let me know what you think.

You might wanna ask this question in the Headless UI repo to better understand how their components were intended to work. You can reference this discussion by adding react-hook-form/react-hook-form#8015 to your question in their repo.

[nehiro]

Thank you for your politeness.
I will refer to this and solve it!

[vsMdulcio]

So field includes a ref property in there and so when you spread that like {...field}, React sees the ref field as the keyword ref prop. However unless you specify React.forwardRef, this is not okay with the React transpiler, so the least intrusive way I've found to fix this is to not include the ref field at all.

Like so:

<Controller
    name="name"
    control={control}
    defaultValue={reviewedRef?.name}
    render={({ field }) => {
        const {ref, ...rest} = field; // removes ref
        return <SwitchButton {...rest} />
}}
/>

This is especially useful if you don't need the ref anyway. Hope that was helpful.