Material-table: Failed propType for Tooltip

[YouriT]

Describe the bug
Warning popping up in the console (on 1.39 and MUI 4.0.1):

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?
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by MTableToolbar)
    in div (created by ForwardRef(InputAdornment))
    in ForwardRef(InputAdornment) (created by Context.Consumer)
    in WithFormControlContext(ForwardRef(InputAdornment)) (created by WithStyles(WithFormControlContext(ForwardRef(InputAdornment))))
    in WithStyles(WithFormControlContext(ForwardRef(InputAdornment))) (created by MTableToolbar)

To Reproduce

Steps to reproduce the behavior:
1.

const tableIcons: Icons = {
  Add: () => <AddBox />,
  Check: () => <Check />,
  Clear: () => <Clear />,
  Delete: () => <DeleteOutline />,
  DetailPanel: () => <ChevronRight />,
  Edit: () => <Edit />,
  Export: () => <SaveAlt />,
  Filter: () => <FilterList />,
  FirstPage: () => <FirstPage />,
  LastPage: () => <LastPage />,
  NextPage: () => <ChevronRight />,
  PreviousPage: () => <ChevronLeft />,
  ResetSearch: () => <Clear />,
  Search: () => <Search />,
  SortArrow: () => <ArrowUpward />,
  ThirdStateCheck: () => <Remove />,
  ViewColumn: () => <ViewColumn />
};
const [geoHoldings, setGeoHoldings] = React.useState(
  toJS(viewModel.geoHoldings) // [{country: 'US', weight: 1}]
);
<MaterialTable
    icons={tableIcons}
    columns={[
        {
        title: "Market",
        field: "market",
        lookup: marketLookup,
        emptyValue: "-"
        },
        {
        title: "Region",
        field: "region",
        lookup: regionsLookup,
        emptyValue: "-"
        },
        {
        title: "Sub region",
        field: "subRegion",
        lookup: subRegionsLookup,
        emptyValue: "-"
        },
        {
        title: "Country",
        field: "country",
        lookup: countriesLookup,
        emptyValue: "-"
        },
        {
        title: "Weight",
        field: "weight",
        emptyValue: "0 %",
        type: "numeric",
        render: rowData => `${rowData.weight.toFixed(2)} %`
        }
    ]}
    data={geoHoldings}
    />

1. Navigate to it
2. See the error in the console

Expected behavior
Not having the message showing up

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Version 74.0.3729.169

[avkonst]

I see the same error but it is followed by another one. Not sure if the cause is the same? Should it be another issue reported for the following:

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 `Tooltip`.
    in Search (created by Tooltip)
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by MTableToolbar)
    in div (created by ForwardRef(InputAdornment))
    in ForwardRef(InputAdornment) (created by Context.Consumer)
    in WithFormControlContext(ForwardRef(InputAdornment)) (created by WithStyles(WithFormControlContext(ForwardRef(InputAdornment))))
    in WithStyles(WithFormControlContext(ForwardRef(InputAdornment))) (created by MTableToolbar)
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(Input))
    in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
    in WithStyles(ForwardRef(Input)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (created by MTableToolbar)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
    in MTableToolbar (created by WithStyles(MTableToolbar))
    in WithStyles(MTableToolbar) (created by MaterialTable)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Container)
    in Container (created by MaterialTable)
    in Provider (created by App)
    in App (created by ErrorBoundary)
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by MaterialTable)
    in MaterialTable
    in Unknown (created by WithStyles(Component))

[jaapjr]

Hi there I got the same error and tried the following. The error/warning message was gone.
In your icons definition you will have to add React.forwardRef as described in the documentation from material-ui: https://material-ui.com/guides/composition/#caveat-with-refs

Search: React.forwardRef((props, ref) => <SvgIcon ref={ref}>
<FontAwesomeIcon
    icon={faSearch}/>
</SvgIcon>)

[avkonst]

Thanks for the tip. I have read the documents pointed by the link but can
not understand why my icons definition is not good enough without ref
forwarding....

On Fri, 14 Jun 2019, 02:58 jaapjr, [e-mail] wrote:

Hi there I got the same error and tried the following. The error/warning
message was gone.
In your icons definition you will have to add React.forwardRef as
described in the documentation from material-ui:
https://material-ui.com/guides/composition/#caveat-with-refs

Search: React.forwardRef((props, ref) => icon={faSearch}/>
)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mbrn/material-table/issues/677?email_source=notifications&email_token=AA6JSVKWNKMN7OO5NHZQKOTP2JODBA5CNFSM4HTW2A62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXT7GFA#issuecomment-501740308,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA6JSVO5HGHGKASN4UNSIADP2JODBANCNFSM4HTW2A6Q
.

[avkonst]

@jaapjr it helped. Thanks

[amendoza-micronsystems]

Hi, I got the same error and tried adding React.forwardRef(...) as recommended but to no avail. I don't know if the problem is in my implementation but I wasn't able to fix it. I was able to clear the warning by wrapping the component inside the Tooltip with <span>. Voila! Tooltip is working and no warning.

[nvtin]

Did anyone solve this issue? After I add forwardRef like this

Add: forwardRef((props, ref) => ),

The error gone but the props is always be empty. iconProps is not working.
Any suggestion?

[kapoorruchi]

Basically, material-ui expects children to be an element as it is being referenced internally as refs.
Now in our case , we are using :
<Tooltip title="test"> <FontAwesomeIcon icon={faMicrophone} /> </Tooltip>

FontAwesomeIcon is a functional component which is not expected.

Instead use :
<Tooltip title="test"> <span> <FontAwesomeIcon icon={faMicrophone} /> </span> </Tooltip>

This will not give any warning and tooltip will show

[OriginalMehdi]

Basically, material-ui expects children to be an element as it is being referenced internally as refs.
Now in our case , we are using :
<Tooltip title="test"> <FontAwesomeIcon icon={faMicrophone} /> </Tooltip>

FontAwesomeIcon is a functional component which is not expected.

Instead use :
<Tooltip title="test"> <span> <FontAwesomeIcon icon={faMicrophone} /> </span> </Tooltip>

This will not give any warning and tooltip will show

This one worked for me!👍

[ronaldruzicka]

I had the same issue with my Button component. I'm using Material UI Button inside, so I used forwardRef and it worked. So you don't have to create an extra element.

import { Button as MuiButton } from '@material-ui/core'

const ButtonRef = (props, ref) => {
  const handleClick = (event) => {
    if (typeof props.onClick === 'function') {
      props.onClick(event)
    }
  }

  return (
    <MuiButton {...props} ref={ref}>
      {props.children}
    </MuiButton>
  )
}

export const Button = React.forwardRef(ButtonRef)

[mighty6ft5max]

Basically, material-ui expects children to be an element as it is being referenced internally as refs.
Now in our case , we are using :
<Tooltip title="test"> <FontAwesomeIcon icon={faMicrophone} /> </Tooltip>

FontAwesomeIcon is a functional component which is not expected.

Instead use :
<Tooltip title="test"> <span> <FontAwesomeIcon icon={faMicrophone} /> </span> </Tooltip>

This will not give any warning and tooltip will show

This worked. I was able to just use a fragment. <>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.