title: React: Tie onFocus and onBlur to both an input and a custom dropdown?
body: <p>I have an input that users type keywords and a function is triggered to fetch data. The data is then populated in a 'suggested results' div right under the input. All this works great. </p>
  
  <p>I am attempting to make it so when the user clicks inside the input or the div (when visible) at any time, they both have focus. When an item in the div is clicked a function is run depending on the item selected and the menu closes. If they click on anything, not the input or the div, the div should hide, or not show. I've been experimenting with where to place onBlur, onFocus, onClick to no success. Just partials to what I want. </p>
  
  <p>I have a state property that is called 'inputFocused' that is set to false initially, when onFocus runs, it is set to true and that boolean determines if the div is shown. </p>
  
  <p>I've attempted to use onBlur on the input that sets inputFocused to false, which of course hides the div. I removed that and placed it in the div, but because it doesn't have focus, it never runs. Only when I put an onclick that sets the state of inputFocused to false does it hide. But when a user clicks anywhere outside the input, the state doesn't change, onBlur isn't triggered. </p>
  
  <pre><code>class Hello extends React. Component {
    constructor() {
      super()
      this.state = {
        inputFocused: false,
        visible: false
      }
  
      this.onFocus = this.onFocus.bind(this);
      this.onBlur = this.onBlur.bind(this);
      this.select = this.select.bind(this)
    }
  
    onFocus() {
    this.setState({inputFocused: false})
      console.log("FOCUS: ", this.state.inputFocused)
      this.setState({ inputFocused: !this.state.inputFocused, visible: !this.state.visible })
    }
    onBlur() {
      console.log("Blur: ", this.state.inputFocused)
      this.setState({ inputFocused: !this.state.inputFocused })
    }
  
    select(){
    console.log("SELECTED")
    this.setState({ inputFocused: !this.state.inputFocused, visible: !this.state.visible })
    }
    render() {
      return (
        &lt;div&gt;
          &lt;div onFocus={this.onFocus}&gt;
            &lt;input placeholder="MyList"&gt;&lt;/input&gt;
          {this.state.inputFocused &amp;&amp; this.state.visible ? (
          &lt;ul&gt;
            &lt;li onClick={() =&gt; this.select()}&gt;abc&lt;/li&gt;
            &lt;li onClick={() =&gt; this.select()}&gt;123&lt;/li&gt;
            &lt;li onClick={() =&gt; this.select()}&gt;xyz&lt;/li&gt; 
          &lt;/ul&gt;
          ) : null}
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;Hello initialName="World"/&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/n5u2wwjg/132164/" rel="nofollow noreferrer">JSFIDDLE</a> that I've put together to show what I currently have. </p>