title: React: Stop click event propagation when using mixed React and DOM events
body: <p>We have a menu. If menu is open, We should be able to close it by clicking anywhere:</p>
  <pre><code>class Menu extends Component {
    componentWillMount() {
      document.addEventListener(&quot;click&quot;, this.handleClickOutside);
    }
  
    componentWillUnmount() {
      document.removeEventListener(&quot;click&quot;, this.handleClickOutside);
    }
  
    openModal = () =&gt; {
      this.props.showModal();
    };
  
    handleClickOutside = ({ target }) =&gt; {
      const { displayMenu, toggleMenu, displayModal } = this.props;
  
      if (displayMenu) {
        if (displayModal || this.node.contains(target)) {
          return;
        }
        toggleMenu();
      }
    };
    render() {
      return (
        &lt;section ref={node =&gt; (this.node = node)}&gt;
          &lt;p&gt;
            &lt;button onClick={this.openModal}&gt;open modal&lt;/button&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;button onClick={this.openModal}&gt;open modal&lt;/button&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;button onClick={this.openModal}&gt;open modal&lt;/button&gt;
          &lt;/p&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  <p>From menu, we can open a modal by clicking on button inside menu. We can close modal in two ways: by clicking close modal button inside modal, or on click on bakcdrop/overlay outside the modal:</p>
  <pre><code>class Modal extends Component {
    hideModal = () =&gt; {
      this.props.hideModal();
    };
  
    onOverlayClick = ({ target, currentTarget }) =&gt; {
      if (target === currentTarget) {
        this.hideModal();
      }
    };
  
    render() {
      return (
        &lt;div className=&quot;modal-container&quot; onClick={this.onOverlayClick}&gt;
          &lt;div className=&quot;modal&quot;&gt;
            &lt;button onClick={this.hideModal}&gt;close modal&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>And now, when menu and modal is open, on close modal click or modal overlay click I want to close only modal, menu should be still open. Only on second click (while modal is closed). At first glance it look pretty clear and easy, this condition should be responsible for that:</p>
  <pre><code>if (displayModal || this.node.contains(target)) {
    return;
  }
  </code></pre>
  <p>If displayModal is <code>true</code>, nothing should happen. I'ts do not work, cause in my case, when you click at the close modal button or overlay, <code>hideModal</code> will be done faster than <code>toggleMenu</code>, and when we call <code>handleClickOutside</code> displayModal will already have <code>false</code>.</p>
  <p>Full test case with open menu and modal at the start:</p>
  <p><a href="https://codesandbox.io/s/reactredux-rkso6" rel="nofollow noreferrer">https://codesandbox.io/s/reactredux-rkso6</a></p>