title: React Component "closing" when lost focus
body: <p>I'm trying to create a <a href="https://github.com/select2/select2/blob/master/src/js/select2/core.js" rel="noreferrer">select2</a> style component in React.</p>
  
  <p>I have got 90% functionality down, the one bit I just can't fathom is <a href="https://i.imgur.com/7cFzixU.gifv" rel="noreferrer">hiding the result box when the user clicks away</a></p>
  
  <p>The render method is:</p>
  
  <pre><code>render() {
      let resultBlock;
  
      if (this.state.showSearch) {
          resultBlock = (
              &lt;div className="search-input-container" onBlur={this.onBlur}&gt;
                  &lt;div className="search-input-results"&gt;
                      &lt;input 
                          type="text" 
                          name={this.props.name}
                          placeholder={this.props.placeholder}
                          className="form-control"
                          onChange={this.inputKeyUp}
                          autoComplete="false" /&gt;
                      &lt;ul&gt;
                          {this.state.items.map((item, i) =&gt; &lt;li key={i} data-value={item.id} onClick={this.itemSelected} className={item.isSelected ? 'selected' : ''}&gt;{item.text}&lt;/li&gt;)}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
      let displayBlock;
      if (this.props.value.text) {
          displayBlock = this.props.value.text;
      } else {
          displayBlock = &lt;span className="placeholder"&gt;{this.props.placeholder}&lt;/span&gt;;
      }
  
      return (
          &lt;div className="form-group"&gt;
              &lt;label htmlFor={this.props.name}&gt;{this.props.label}:&lt;/label&gt;
  
              &lt;div className="form-input"&gt;
                  &lt;div className="searchable-dropdown" onClick={this.revealSearch}&gt;
                      {displayBlock}
                      &lt;div className="arrow"&gt;&lt;i className="fa fa-chevron-down" aria-hidden="true" /&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  {resultBlock}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>I've tried moving <code>onBlur={this.onBlur}</code> around, but it only fires if the <code>&lt;input...</code> had focus before one clicked away.</p>
  
  <p>It can't be that complicated, the only approach I thought of, is attaching a global click handler to the page, and diff'ing clicks to understand if a user hasn't clicked on my component. But this seems over engineered.</p>
  
  <p>How can this be achieved?</p>