Material-ui: [4.0.0-beta.1] Wrapping function components in <Tooltip /> causes errors

[DJanoskova]

Anytime I wrap a custom component in a <Tooltip /> (for example I have a custom styled light button) I get this or similar error:

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

Those always disappear if I remove the Tooltip wrapper around my component. Tooltips aren't working for me, I use functional components so they cannot be given refs.

• [ x ] This is not a v0.x issue.
• [ x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I use a Tooltip like the docs say

      <Tooltip title="Delete">
        <IconButton aria-label="Delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>

and it works without errors.

Current Behavior 😯

const styles = {
  light: {
    color: grey[400],
    '&:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.03)',
    }
  }
};

const ButtonLight = ({ classes, type, children, ...otherProps }) => {
  switch (type) {
    case 'fab':
      return <Fab {...otherProps} className={classes.light}>{children}</Fab>;
    case 'icon':
      return <IconButton {...otherProps} className={classes.light}>{children}</IconButton>;
    case 'button':
    default:
      return <Button {...otherProps} className={classes.light}>{children}</Button>
  }
};

export default withStyles(styles)(ButtonLight)

    <Tooltip title={tooltip} placement="top">
      <ButtonLight type="icon" onClick={handleModalShow}>
        <EditIcon />
      </ButtonLight>
    </Tooltip>

Wrapping a custom component like <ButtonLight /> in a MUI <Tooltip /> results in following error:

index.js:1446 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of WithStyles(ButtonLight).

Steps to Reproduce 🕹

Link:

Context 🔦

I'm trying to, well, develop an app. The constant popping error console.logs are affecting my performance and disturbing me.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | 4.0.0-beta.1 |
| React | 16.8.6 |
| Browser | Chrome |
| TypeScript | No |
| etc. | |

[mbrookes]

The clue is in the error message:

Did you mean to use React.forwardRef()?

For example: https://github.com/mui-org/material-ui/blob/37d5d6cd1795caf2752300145a9ad96464815aa2/packages/material-ui/src/Paper/Paper.js#L30

I'll label as a docs issue, but it's tricky to know where to draw the line between documenting Material-UI, and teaching React, especially when the error message is so explicit... Already documented, see @eps1lon's comment below/

[eps1lon]

We don't support function components as the children of the Tooltip anymore. This was included in the @material-ui/[email protected] changelog and it has a dedicated section in the migration guide

We realize that the single warning from react isn't very helpful since you don't "see" a ref in your core. This is why we added an additional warning: #15519 in @material-ui/[email protected] which you should see:

Warning: Failed prop type: Invalid prop children supplied to Tooltip. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://next.material-ui.com/guides/composition/#caveat-with-refs

I don't think we can do more at this point.

[DJanoskova]

But functional components are the future of React. This feels like a downgrade and makes me want to move back to the old Material UI version. Since hooks are there, percentage of function components vs class components is only going to increase in projects.

Thanks for the response though.

[oliviertassinari]

@DJanoskova function vs class doesn't impact the issue we are discussing. It's about the ref forwarding behavior.

[DJanoskova]

I'm replying to this sentence:

We don't support function components as the children of the Tooltip anymore

Maybe I got it wrong.

[joshwooding]

We don't support function components as the children of the Tooltip anymore.

This was a bit confusing, what was meant was we don't accept components that can't hold refs. Plain function components can't so currently you need to use React.forwardRef to forward the ref prop to an element/component that can.

[DJanoskova]

@joshwooding Thanks. I've never used it, personally. Is there a working example with MUI <Tooltip> anywhere, please? I didn't find it in the docs, but maybe I didn't open each code snippet.

[joshwooding]

@DJanoskova https://codesandbox.io/s/10knw1py04 :)

[eps1lon]

We don't support function components as the children of the Tooltip anymore

Maybe I got it wrong.

This was poorly worded on my part. It was mainly about a technical detail about ref forwarding and react. We don't support them as the immediate children because the refs are not automatically forwarded in the current version of react.

There's currently an open proposal that would remove the need for forwardRef. Until then you need to make use of forwardRef.

Our composition guide (this is the latest version of the docs which will soon be included on the main docs page) goes into more detail about why this happens and how you can fix it.

[DJanoskova]

@joshwooding @eps1lon Thanks a lot, gonna check it out! Have a great day 😊

[ShamansCoding]

As a solution to this issue, you can wrap your components with \

[amendoza-micronsystems]

@ShamansCoding I though of the same solution but what if my div is bigger than the component I want to put Tooltip on? The position of the Tooltip will be off. I used <span> instead. :)