React Component "closing" when lost focus
<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>