Material UI First MenuItem not showing Tooltip if created using React.forwardRef

Michael Sims 0
Viewed 26

I have a common custom component (a <MenuItem /> from Material-UI) that is wrapped in React.forwardRef. I use this in many places for displaying items in <Menu /> components - sometimes a ref is passed, in other cases not.

I want this component to have a <Tooltip /> but I find that the Tooltip does not display on the first instance of the common component in a Menu (but does show on other instances).

If i remove the prop innerRef={ref} from the <MenuItem /> in my component, that does fix it - but I don't quite understand why?

I think I could resolve this by wrapping the <MenuItem /> in e.g a <span />, but I'm keen to understand what is going on here and why the Tooltip is not showing?

https://codesandbox.io/s/new-fire-fngcof?file=/src/App.tsx

Tooltip shown on second MenuItem

No Tooltip shown on first MenuItem

tooltip menuitem material-ui reactjs
1 Answers

There is no property named innerRef in MUI or React.
Change that to ref and everything will work as expected.

<Tooltip title={props.tooltipTitle}>
  <MenuItem ref={ref}>Menu item</MenuItem>
</Tooltip>

If you are eager to know what is innerRef, see this question.

Hamed Siaban0
Related