[Slot] Access ref from props else fallback to element.ref

[chungweileong94]

Description

fix #2769

Starting from the React 18.3.0 canary, accessing the ref via element.ref will throw a warning, and element.ref will be removed in the future React release.

Instead, we should access the ref from props. To maintain the backward compatibility, we can do children.props.ref ?? children.ref.

[ZipBrandon]

Just chiming in to say that I had an issue with Portal when used in conjunction with framer-motion in the React canary releases since 19.0.0-canary-7a2609eed-20240403 and that this was the fix. Thank you.

[alaney2]

Thanks for fixing this

[borispoehland]

Thank you!

[tillka]

Is there a way to fix this manually / locally until the official fix is out? The 7x 'element.ref' warnings I am getting on each page refresh are very annoying.

[juliusmarminge]

I also had to patch @radix-ui/react-presence to get rid of all warnings:

[chungweileong94]

I also had to patch @radix-ui/react-presence to get rid of all warnings:

Ah thx, wasn’t able to find the others, will include this as well.

[chungweileong94]

@juliusmarminge I applied the same fix to @radix-ui/react-presence too.

[juliusmarminge]

LGTM

[tungv]

Just a gentle reminder that this PR being merged and released is so valuable for a lot of people. Thank you.

[eps1lon]

It's fine to access child.ref conditionally. React only warns when accessing child.ref iff a ref prop is actually passed.

[nicksrandall]

LGTM

[Brenndoerfer]

Would be great to get an approval from one of the code owners on this.. it also impacts Shadcn/ui

[paplco]

hey @andy-hook @benoitgrelard

hoping this gets approved soon. thanks!

[sannajammeh]

As this is taking a little while, here's how to suppress the annoying logs until its merged:

_supressLogs.ts

// TODO - delete when https://github.com/radix-ui/primitives/pull/2811 gets merged 
const prevConsoleError = console.error;
const prevConsoleWarn = console.warn;

console.error = (...args) => {
  if (args[0].includes("Warning: Accessing element.ref")) {
    return;
  }

  prevConsoleError(...args);
};

console.warn = (...args) => {
  if (args[0].includes("Warning: Accessing element.ref")) {
    return;
  }

  prevConsoleWarn(...args);
};

Import this globally at your app root.
For Next.js this would be

Root layout.tsx

import "./_supressLogs";
// Your root layout

And Root client provider file _Providers.tsx

"use client";

import "./_supressLogs";
// Your provider