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

[enigma1]

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

#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.

[mnajdova]

You are using ClickAwayListener, which indeed does not accept a ref, so the error is correct. You should pass as a first element a component accepting ref as indicated in the error message. It is not the same error as in #15911

[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

[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';

[chwallen]

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:

The disabled behavior is documented on the Tooltip page here.

[enigma1]

Perhaps the documentation should be changed to include the wrapper for all cases. In my code sample the button is enabled.

[TheDistroHopper]

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

<Tooltip>
   <Box>
       {children}
   </Box>
</Tooltip>

Worked for me.

[rebecca-xie-au]

Hi,
Has anyone tried adding a Tooltip for TableRow?

[igortas]

Still failing when u put any component inside ClickAwayListener, or box, div....