title: react dropdown using ref and select tag
body: <p>I'm trying to make a drop down with select tag and which triggers when I click on it which is happening right now but I want to make that clickable even when the mouse click happens on its header which is in the same div). </p>
  
  <p>So for example if I click on 'My Text" it should open dropdown... for this I used refs but no luck. </p>
  
  <p>Thanks for your time. </p>
  
  <pre><code>focusTextInput() {
          this.textInput.current.onfocus();
        }
  
  render() {
          return (
              &lt;div className='row abc-container'&gt;
                  &lt;div className='abc-tag' &gt;
                      &lt;div className="text" onClick={this.focusTextInput}&gt; My Text 
                          &lt;select className="key-list"   ref={this.textInput}
                          value ={this.props.activeClient} &gt;
                              &lt;option &gt;10&lt;/option&gt;
                              &lt;option &gt;20&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>