title: How to handle ref.current.contains() on a children that use ReactDOM.createPortal()?
body: <p>I create an app using React hooks. I have a helper function <code>onClickOutsideHook(ref, callback)</code> that trigger the <code>callback</code> when you click outside of the component that provide the <code>ref</code> using <code>React.useRef</code>:</p>
  <pre class="lang-js prettyprint-override"><code>export const onClickOutsideHook = (ref, callback) =&gt; {
    // Hook get from https://stackoverflow.com/a/42234988/8583669
  
    React.useEffect(() =&gt; {
      const handleClickOutside = event =&gt; {
        if (ref?.current &amp;&amp; !ref.current.contains(event.target)) {
          callback();
        }
      };
      // Bind the event listener
      document.addEventListener(&quot;mousedown&quot;, handleClickOutside);
      return () =&gt; {
        // Unbind the event listener on clean up
        document.removeEventListener(&quot;mousedown&quot;, handleClickOutside);
      };
    }, [callback, ref]);
  };
  </code></pre>
  <p>I have a component <code>Dropdown</code> that use this helper so it close when you click outside of it. This component has a <code>Modal</code> component as children that use <code>ReactDOM.createPortal</code>. I use it to render the  <code>Modal</code> in <code>body</code> so it can cover all the app screen. My <code>Modal</code> contain a button that alert a message when you clicked on it:</p>
  <pre class="lang-js prettyprint-override"><code>function Modal() {
    return ReactDOM.createPortal(
      &lt;div
        style={{
          position: &quot;absolute&quot;,
          top: 0,
          left: 0,
          height: &quot;100%&quot;,
          width: &quot;100%&quot;,
          background: &quot;rgba(0,0,0,0.6)&quot;
        }}
      &gt;
        &lt;button onClick={() =&gt; alert(&quot;Clicked on Modal&quot;)}&gt;Click&lt;/button&gt;
      &lt;/div&gt;,
      document.body
    );
  }
  
  function Dropdown(props) {
    const [isModalOpen, setIsModalOpen] = React.useState(false);
  
    const dropdownRef = React.useRef(null);
    onClickOutsideHook(dropdownRef, props.onClose);
  
    return (
      &lt;div ref={dropdownRef}&gt;
        Click outside and I will close
        &lt;button onClick={() =&gt; setIsModalOpen(true)}&gt;open Modal&lt;/button&gt;
        {isModalOpen ? &lt;Modal /&gt; : &lt;&gt;&lt;/&gt;}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>The problem is when I click on the <code>Modal</code> button to trigger the alert, the <code>Dropdown</code> is closed before since I clicked outside of it (<code>Modal</code> is not rendered as a children of <code>Dropdown</code> but in <code>body</code>). So my alert is never triggered.</p>
  <p>Is there a way to define <code>Modal</code> as a children of <code>Dropdown</code> using <code>ref</code> but still render it in <code>body</code> using <code>ReactDOM.createPortal</code>?</p>
  <p>Just have a look to the <a href="https://codesandbox.io/s/silly-feather-hw48n?file=/src/App.js" rel="noreferrer">CodeSandbox</a>.</p>