[Tooltip] `The children component of the Tooltip is not forwarding its props correctly` error when focusing another element

[m4theushw]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

In the demo in https://mui.com/x/react-data-grid/editing/#validation, we wrap a InputBase into a Tooltip to show the validation error. The problem is that as soon as the user enters the edit mode (double-clicking the cell), we imperatively call inputRef.current.focus() to focus the input and this generates the following error:

The children component of the Tooltip is not forwarding its props correctly.

The problem seems to come from https://github.com/mui/material-ui/blob/6e69c8e8db54305f7602e11ea76b9b13adcf04cd/packages/mui-material/src/Tooltip/Tooltip.js#L425-L429

childNode initially has the correct element —the immediate child of Tooltip—, but when .focus is called, childNode becomes the input, which falls in

https://github.com/mui/material-ui/blob/6e69c8e8db54305f7602e11ea76b9b13adcf04cd/packages/mui-material/src/Tooltip/Tooltip.js#L549-L555

Expected behavior 🤔

No error in the console.

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/magical-brahmagupta-xgisfp?file=/src/App.tsx
2. Click "Toggle input"
3. Look at the console

Context 🔦

Related to https://github.com/mui/mui-x/issues/5457

Your environment 🌎

npx @mui/envinfo

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

[colespencer1453]

@m4theushw I am getting the: MUI: The children component of the Tooltip is not forwarding its props correctly. Please make sure that props are spread on the same element that the ref is applied to.

Error when using a tooltip on the GridEditInput cell like so. I am using this in the renderEditCell.

Is this a bug or am I using refs/props incorrectly here?

const StyledTooltip = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper: className }} />)(
  ({ theme }) => ({
    [`& .${tooltipClasses.tooltip}`]: {
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText,
      height: '100%'
    }
  })
);

function BidEditInputCell(props: GridRenderEditCellParams) {
  const { error } = props;

  return (
    <StyledTooltip open={!!error} title={error}>
      <GridEditInputCell
        {...props}
        sx={{ border: 1, borderColor: !!error ? 'error.main' : 'success.main', borderRadius: '4px' }}
      />
    </StyledTooltip>
  );
}

[arunv97]

I got the same issue while using tooltip,for my input field. I solved it by wrapping it above a div or in my case formgroup, it solved my console error.

[arunv97]

I got the same issue while using tooltip,for my input field. I solved it by wrapping it above a div or in my case formgroup, it solved my console error.

Not sure if this is the correct approach.

[nzayatz14]

I am also having this issue when wrapping a <Textfield/> component in a <Tooltip/>. If I set the autoFocus prop true on the <Textfield/>, I get this error on first load of the page. If I do not set autoFocus to true no error is logged.

[eugene-g13]

I just wrap my component in React.forwardRef and pass props to inner component. And it works for me.

const TooltipChild = React.forwardRef(
    ({ someProp1, someProp2, ...props }: Props, ref: React.Ref<HTMLInputElement>) => {
        return (
            <Box {...props} ref={ref} ... ></Box>
        );
    }
);

<Box {...props} ref={ref}> - is the key

[dennisat]

It looks like Tooltip doesn't like other components' ref for some reason.

If you wrap the children with a <span> it works.

[Falven]

Can we get a real fix in for this issue? Wrapping it in an extra DOM node to drown out the error because the GridEditInputCell doesn't properly forward it's ref is not a good solution.

[joackob]

I wrap all in a Box and it work

[sleepywei]

I just migrated from MUI v4 to v5 and experienced the same problem when I wrapped the Button component in the Tooltip. The extra node doesn't always work for me, and I don't feel it is a good solution anyway. Do you have any suggestions?

[hnrq]

+1 here. Having to wrap GridEditInputCell on an extra DOM node seems like a not-so-good workaround :(

[undesicimo]

Yes the extra node feels too hacky. would love another workaround for this

[undesicimo]

const Icon = forwardRef<SVGSVGElement, {size?: number; color?: string}>(function Icon(
  {size, color, ...rest},
  ref
) {
  return (
    <svg
      width={size ?? '13px'}
      height={size ?? '13px'}
      viewBox='0 0 20 20'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
      ref={ref}
      {...rest}
    >
      <path ....
    </svg>
  );
});

forwarding ref and spreading the props seems to be a better workaround rather than adding a extra node

[kateryna-chorus]

this case described in MUI docs https://mui.com/material-ui/react-tooltip/#custom-child-element Solution is to spread the props to the underlying DOM element.

[raelgc]

The proper fix is like proposed by @undesicimo: don't forget the forwardRef usage and pass the remaining properties as {...rest}.