title: parentNode is null when walking up the DOM-tree from e.currentTarget in React
body: <p>We are using react and have code similar to this:</p>
  
  <pre><code>const isDescendant = (predicateFn, child) =&gt; {
    let node = child.parentNode;
  
    while (node !== null) {
      if (predicateFn(node)) return true;
      node = node.parentNode;
    }
  
    return false;
  }
  
  componentDidMount() {
    const nodeIsModal = () =&gt; // ...
  
    const onBodyClick = (e) =&gt; {
      if (isDescendant(nodeIsModal, e.currentTarget)) {
        this.tryToClose();
      }
    };
    document.addEventListener('click', onBodyClick);
  }
  </code></pre>
  
  <p>This seems to work but when we click <strong>some</strong> elements in the DOM and <code>isDescendant</code> starts walking up the DOM-tree from <code>e.currentTarget</code> it suddenly stops because <code>node.parentNode</code> returns <code>null</code>. The thing is that when clicking "inspect element" we clearly see that the node is in the middle of the DOM-tree and obviously has a parent node. It looks like the node (or it's ancestors) returned from <code>e.currentTarget</code> are somehow detached from the real DOM-tree.</p>
  
  <p>Is react doing something here that gives this behaviour or are we tricking ourselves up some other how?</p>