CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
zeckdude
zeckdude

Reputation: 16163

Why does custom Button component using MUI Button not work on hover with Tooltip?

I created a Custom Button that wraps a MUI Button in order to select default props and such. Below is a simplified example of what I created, but the issue still exists.

Below is the code and here is a codesandbox link: https://codesandbox.io/s/material-ui-button-forwardref-tooltip-hover-problem-entv2?file=/Button.js

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref}>{props.children}</MuiButton>
));

<Tooltip title="I can hover" placement="top">
  <Button>Custom Button</Button>
</Tooltip>

According to the Tooltip docs at https://material-ui.com/api/tooltip/#props, I should make sure that the child can hold a ref, so I have wrapped it in the React.forwardRef function and passed the ref to the Material UI Button component that it is returning, but the tooltip still isn't working.

Any ideas what I'm missing?

Upvotes: 6

Views: 2733

Answers (1)

zeckdude
zeckdude

Reputation: 16163

I figured out the solution, so instead of closing the question, I'll leave what I did. So I forgot to spread the props object to the wrapped MUI button and apparently the Tooltip is passing something to the Button that is important to make the hover work. Likely it is the onMouseOver, onMouseLeave, onFocus, onBlur, onTouchStart, and onTouchEnd props that are the issue.

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref} {...props}>
    {props.children}
  </MuiButton>
));

Upvotes: 7

Related Questions