[Tooltip] does not close when being controlled

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When the tooltip is controlled and the handleClose is shared for the title, if you create a close button and use the handleClose, the tooltip is closed, but after a while it is reopened depends on enterNextDelay, but it does not close.

Expected Behavior 🤔

The tooltip can be closed normally by the title being controlled.

Steps to Reproduce 🕹

Live example

CustomTooltip (to pass handleClose):

import { experimentalStyled, Tooltip, tooltipClasses } from "@material-ui/core";
import React, { useState } from "react";

export default experimentalStyled(
  ({ className, children, title, ...props }) => {
    const [open, setOpen] = useState(false);

    const handleOpen = () => {
      setOpen(true);
    };

    const handleClose = () => setOpen(false);

    return (
        <Tooltip
          open={open}
          onClose={handleClose}
          title={title({ handleClose, isOpen: open })}
          children={children({ handleClose, isOpen: open })}
          onOpen={handleOpen}
          PopperProps={{ keepMounted: true }}
          arrow
          classes={{ popper: className }}
          {...props}
        />
    );
  }
)(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: "#f5f5f9",
    color: "rgba(0, 0, 0, 0.87)",
    maxWidth: "none",
    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)}`,
    boxShadow: theme.shadows[10],
    pointerEvents: "auto"
  },
  [`& .${tooltipClasses.arrow}`]: {
    color: "#f5f5f9"
  }
}));

App:

<CustomTooltip
  title={({ handleClose }) => (
    <Box p={5}>
      <Button variant="contained" onClick={handleClose}>close</Button>
    </Box>
  )}>
  {({ handleClose }) => (
    <Button variant="contained">open tooltip (enter next delay: 0 default)</Button>
  )}
</CustomTooltip>

Steps:

1. Create a controlled tooltip and pass the handleClose to the title.
2. Use this handle close on any button.
3. Keep clicking this close button quickly (depends on enterNextDelay)

Context 🔦

It seems that there is no lock when the tooltip is closed so as not to open until the animation is finished.

Your Environment 🌎

Google Chrome, but I believe it happens in any browser

[eps1lon]

Fixed in the next alpha release.

Note that you still need to adjust your component since it has the same problematic CSS we applied:

 )(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: "#f5f5f9",
     color: "rgba(0, 0, 0, 0.87)",
     maxWidth: "none",
     padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)}`,
     boxShadow: theme.shadows[10],
-    pointerEvents: "auto"
   },
   [`& .${tooltipClasses.arrow}`]: {
     color: "#f5f5f9"
   }
 }));

pointer-events: auto is no longer necessary in v5. Tooltips are hoverable by default now.

[eps1lon]

Thanks for the report. That is the exact kind of stress tests I was hoping to catch during alpha!

The tooltip can be closed normally by the title being controlled.

The tooltip can be controlled via open prop not the title. The title shouldn’t depend on the tooltips open state since it’s relevant to the child even if the tooltip isn’t perceivable to grant access to users relying on assistive technology.

As far as I know, tooltips should not contain interactive elements.

Tooltips can contain interactive content.

I suspect that the following is happening:

1. Hover over Tooltip
2. Click close
3. move mouse during exit transition
4. pointerover is fired on the tooltip since it’s exiting

So either we don’t trigger an open while the tooltip is exiting or we disable pointer-events during exit transition.