title: How to hide a div when input or child is not focused using React?
body: <p>So, I have a custom search and select component that renders an input and a results list wrapped in a parent container:</p>
  
  <pre><code>&lt;div className='wrapper'&gt;
    &lt;input /&gt;
    &lt;div className='results'&gt;
      &lt;div&gt;Result Item&lt;/div&gt;
      &lt;div&gt;Result Item&lt;/div&gt;
      &lt;div&gt;Result Item&lt;/div&gt;
      &lt;div&gt;Result Item&lt;/div&gt;
      &lt;div&gt;Result Item&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'm trying to achieve is that when a user focuses on the <code>input</code> the results list div appears. I'm achieving this using a piece of state - <code>isExpanded</code>. So, I use the onFocus method of the input:</p>
  
  <pre><code>&lt;input onFocus={this.handleFocus} /&gt;
  </code></pre>
  
  <p>And the function:</p>
  
  <pre><code>handleFocus = () =&gt; {
    this.setState({
      isExpanded: true
    });
  }
  </code></pre>
  
  <p>That works great. The issue I'm having is getting it to close at the proper moment. It should only close if the user physically clicks outside of the the <code>wrapper</code> <code>div</code>.  When I need it to remain open:</p>
  
  <ul>
  <li>If the user clicks on any of the result items</li>
  <li>If the user was focused on the input, then clicks the result item</li>
  <li>If a user clicks on a result item, then focuses on the input</li>
  </ul>
  
  <p>So, basically any interaction within the <code>wrapper</code> div should remain open.</p>
  
  <p>In order to attempt to achieve this, I've put a blur event around the wrapper:</p>
  
  <pre><code>&lt;div className='wrapper' tabIndex='1' onBlur={this.handleBlur}&gt; ... &lt;/div&gt;
  </code></pre>
  
  <p>And then the function</p>
  
  <pre><code>handleBlur = () =&gt; {
    this.setState({
      isExpanded: false
    });
  }
  </code></pre>
  
  <p>The problem is, when click an item or focusing on the input takes away the focused <code>wrapper</code> that event fires, as it should, but I cannot prevent it from firing when I don't want it to.</p>
  
  <p>I've tried using <code>document.activeElement</code> mixed with <code>ReactDOM.findDOMNode</code> to compare the active element, but it is still not working. Any ideas?</p>
  
  <p>Here is a basic example of what I'm trying to achieve (it uses a different function binding method, but point still stands):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class SearchAndSelect extends React.Component {
  
    constructor() {
      super();
      this.state = {
       isExpanded: false
      }
      this.handleBlur = this.handleBlur.bind(this);
      this.handleFocus = this.handleFocus.bind(this);
    }
    
    handleBlur() {
      this.setState({
        isExpanded: false
      })
    }
    
    handleFocus() {
      this.setState({
        isExpanded: true
      })
    }
    
    render(){
      return(
        &lt;div className='wrapper' tabIndex='1' onBlur={this.handleBlur}&gt;
          &lt;input onFocus={this.handleFocus} /&gt;
          {this.state.isExpanded &amp;&amp; &lt;div&gt;Results&lt;/div&gt;}
        &lt;/div&gt;
      );
    }
  
  }
  
  ReactDOM.render(&lt;SearchAndSelect /&gt;, document.getElementById('container'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>