title: Handle outside click closes on clicking the modal itself. Basically shouldn't close when clicked anywhere but outside of the modal
body: <p>This code has worked for me before but i'm not sure what's changed in this other component i'm trying to use it in. </p>
  
  <p>I've tried using hooks to open and close modal and just plain on click event listener but both times it closes on clicking anywhere on the page. </p>
  
  <pre><code>componentDidMount() {
      document.addEventListener('click', this.handleOutsideClick);
    }
  
    componentWillUnmount() {
      document.removeEventListener('click', this.handleOutsideClick);
    }
  
    handleOutsideClick = (e) =&gt; {
      if (this.state.showInfoModal &amp;&amp; !this.node.contains(e.target)) this.handleInfoToggle();
      console.log(this.state.showInfoModal, e.target, this.node, 'clicked outside');
    }
  
    handleInfoToggle = (event) =&gt; {
      const { showInfoModal } = this.state;
  
      if (event) event.preventDefault();
      this.setState({ showInfoModal: !showInfoModal });
    };
  
  renderSomething = (args) =&gt; {
   return(
     &lt;span ref={(node) =&gt; { this.node = node; }}&gt;
     {something === true &amp;&amp; &lt;span className={styles.somethingelse}&gt; 
     &lt;HintIcon onClick={this.handleInfoToggle} /&gt;&lt;/span&gt;}
      &lt;Modal visible={showInfoModal} onCancel={this.handleInfoToggle}&gt;
       some information to show
      &lt;/Modal&gt;
     &lt;/span&gt;
    )
  }
  
  render() =&gt; {
    return (
     {this.renderSomething(args)}
    )
  }
  
  </code></pre>
  
  <p>Not sure if this is enough info. but this is driving me nuts. </p>
  
  <p>I also tried adding a dontCloseModal function that someone had suggested: </p>
  
  <pre><code>  dontCloseModal = (e) =&gt; {
      e.stopPropagation();
      console.log(e);
      this.setState({
        showInfoModal: true
      });
    }
  
   &lt;div onClick={this.dontCloseModal}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>(((this would go around the <code>&lt;Modal/&gt;</code> component )))</p>
  
  <pre><code>  const refs = React.createRef(); // Setup to wrap one child
    const handleClick = (event) =&gt; {
      const isOutside = () =&gt; {
        return !refs.current.contains(event.target);
      };
      if (isOutside) {
        onClick();
      }
    };
  
    useEffect(() =&gt; {
      document.addEventListener('click', handleClick);
  
      return function() {
        document.removeEventListener('click', handleClick);
      };
    });
  
    return (element, idx) =&gt; React.cloneElement(element, { ref: refs[idx] });
  }
  
  export default ClickOutside;
  </code></pre>
  
  <p>Tried using a component like this ^^ and adding <code>&lt;ClickOutside onClick={this.closeInfoModal()}&gt;&lt;/ClickOutside&gt;</code>
  But same issue with this too- closes on click anywhere including inside modal </p>