Afterall, we can solve it :)

Author: oliviertassinari

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/ClickAwayListener/ClickAwayListener.test.js

@@ -140,4 +140,34 @@ describe('<ClickAwayListener />', () => {
     fireEvent.click(document.body);
     expect(handleClickAway.callCount).to.equal(0);
   });
+
+  it.only('should support removed element child', () => {
+    const Demo = () => {
+      const [visible, setVisible] = React.useState(true);
+
+      console.log('visible', visible);
+
+      return visible ? (
+        <button
+          type="button"
+          onClick={() => {
+            setVisible(false);
+          }}
+        >
+          Will be removed from DOM
+        </button>
+      ) : null;
+    };
+    const handleClickAway = spy();
+    const { getByText } = render(
+      <div>
+        <Demo />
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <div />
+        </ClickAwayListener>
+      </div>,
+    );
+    fireEvent.click(getByText('Will be removed from DOM'));
+    expect(handleClickAway.callCount).to.equal(1);
+  });
 });

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,