[material-ui] Accessing element.ref was removed in React 19

[oliviertassinari]

In React 19, ref is now a prop and should be accessed through props.ref. We have some instances of this we should fix: https://github.com/search?q=repo:mui/material-ui%20children.ref&type=code

Example with Tooltip

https://codesandbox.io/p/sandbox/silly-sea-m9cjyn?file=%2Fsrc%2FDemo.tsx

import * as React from "react";
import Tooltip from "@mui/material/Tooltip";

export default function BasicTooltip() {
  const ref = React.useRef();
  return (
    <Tooltip title="Delete">
      <button ref={ref}>hello</button>
    </Tooltip>
  );
}

Warning: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
at Tooltip (node_modules/@mui/material/Tooltip/Tooltip.js:294:85)

Context

• First reported in [data grid] Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release mui-x#13432
• https://github.com/radix-ui/primitives/pull/2811/files#r1601508869 explain what happens

material-ui/packages/mui-material/src/Tooltip/Tooltip.js

Line 560 in 5149a65

const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);

Your environment

react v19.0.0-rc.0
@mui/material v5.15.19

[DiegoAndai]

Updated issue so it covers all cases and not only the Tooltip one.

[luc-nham]

The Select component also appears the warning. My environment:

• React 19 Canary
• Material UI v5.x

[oliviertassinari]

The Select component also appears the warning

@luc-nham Right, we solved some of the instances of the issue but we didn't solve the issue. There are still hits for this: https://github.com/search?q=repo%3Amui%2Fmaterial-ui%20children.ref&type=code.

---

Actually, we have 3 times the same components, so 3 times the same fix to apply?

• https://github.com/mui/base-ui/blob/master/packages/mui-base/src/legacy/FocusTrap/FocusTrap.tsx
• https://github.com/mui/material-ui/blob/next/packages/mui-base/src/FocusTrap/FocusTrap.tsx
• https://github.com/mui/material-ui/blob/next/packages/mui-material/src/Unstable_TrapFocus

At first sight, it doesn't seem to make sense, what's the direction?