Failed prop type: Invalid prop `children` supplied to `ForwardRef(Tooltip)`. Expected an element that can hold a ref

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Tooltip component emits an error on children reporting that a plain function component was used instead of a react element. But a react element was passed. Using a react fragment as a children wrapper is the current workaround

Sample here

https://codesandbox.io/s/compassionate-wave-59d138?file=/src/App.js

Error should show in console

Expected behavior 🤔

When a react component and a ref can be used in the tooltip’s children no error should be emitted.

Steps to reproduce 🕹

Steps:

1. Setup a Tooltip component with your own react component as it’s child for example

2. Examine the console’s errors

Context 🔦

Also related with this issue

https://github.com/mui/material-ui/issues/15911

It’s pretty much the same, so a common workaround could be made perhaps. Wrapping tooltip’s children in a fragment gets rid of the error.

FYI @oliviertassinari

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[enigma1]

And because the tooltip component causes similar issues with disabled buttons wrapped-in, I created a wrapper to get around this problem. So the wrapper could be like:

import {Tooltip} from '@mui/material';

const PatchTooltip = ({children, ...props}) =>
  <Tooltip {...props}>
    <span>{children}</span>
  </Tooltip>

export default PatchTooltip;

Then place it in a temp-workaround folder and use it.

import Tooltip from './Workarounds/Tooltip';

[enigma1]

If you wrap the children of the Tooltip to a fragment it doesn’t generate an error

<Tooltip title="Something">
      <>
        <ClickAwayListener onClickAway={handleClickAway}>
          <Box sx={{ position: "relative" }}>
            <button type="button" onClick={handleClick}>
              Open menu dropdown
            </button>
            {open ? (
              <Box sx={styles}>
                Click me, I will stay visible until you click outside.
              </Box>
            ) : null}
          </Box>
        </ClickAwayListener>
      </>
    </Tooltip>

And there is no reference passed in fragments. That’s not an expected behavior