Afterall, we can solve it :)

docs/src/pages/components/click-away-listener/click-away-listener.md

@@ -17,22 +17,3 @@ For instance, if you need to hide a menu dropdown when people click anywhere els
 
 Notice that the component only accepts one child element.
 You can find a more advanced demo on the [Menu documentation section](/components/menus/#menulist-composition).
-
-## Limitations
-
-If a page contains an element/component that gets removed from DOM when clicked, the `ClickAwayListener` will not be able to raise the `onClickAway` event due to a check trying to prevent raising the event for already removed `ClickAwayListener` children.
-
-The workaround for this is to either use css/style to hide the clicked element or delay the removal of the element.
-Check the example below
-
-```jsx
-// Instead of removing from DOM
-{showButton && (<Button onClick={handleClick}>
-  Click to hide
-</Button>)}
-
-// Use styles prop
-<Button style={showButton ? { display: 'block' } : { display: 'none' }}  onClick={handleClick}>
-  Click to hide
-</Button>)
-```

packages/material-ui/src/ClickAwayListener/ClickAwayListener.js

@@ -63,10 +63,20 @@ const ClickAwayListener = React.forwardRef(function ClickAwayListener(props, ref
       return;
     }
 
-    // Multi window support
-    const doc = ownerDocument(nodeRef.current);
+    let insideDOM;
 
-    if (doc.documentElement.contains(event.target) && !nodeRef.current.contains(event.target)) {
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      const doc = ownerDocument(nodeRef.current);
+      // TODO v6 remove dead logic https://caniuse.com/#search=composedPath.
+      insideDOM =
+        !(doc.documentElement && doc.documentElement.contains(event.target)) ||
+        nodeRef.current.contains(event.target);
+    }
+
+    if (!insideDOM) {
       onClickAway(event);
     }
   });

packages/material-ui/src/Tooltip/Tooltip.js

@@ -444,6 +444,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     ...other,
     ...children.props,
     className: clsx(other.className, children.props.className),
+    ref: handleRef,
   };
 
   const interactiveWrapperListeners = {};
@@ -502,7 +503,7 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
 
   return (
     <React.Fragment>
-      {React.cloneElement(children, { ref: handleRef, ...childrenProps })}
+      {React.cloneElement(children, childrenProps)}
       <Popper
         className={clsx(classes.popper, {
           [classes.popperInteractive]: interactive,