title: react material ui autocomplete element focus onclick
body: <p>I have a material-ui autocomplete element</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;Autocomplete
    id="combo-box-demo"
    autoHighlight
    openOnFocus
    autoComplete
    options={this.state.products}
    getOptionLabel={option =&gt; option.productName}
    style={{ width: 300 }}
    onChange={this.selectProduct}
    renderInput={params =&gt; (
      &lt;TextField {...params} label="Select Product Name" variant="outlined" /&gt;
    )}
  /&gt;;
  </code></pre>
  
  <p>I want this element to get focus when I click a button.  </p>
  
  <p>I tried using references as discribed here <a href="https://stackoverflow.com/questions/43145549/how-react-programmatically-focus-input">how react programmatically focus input</a> <br></p>
  
  <p>It worked for other elements but not for autocomplete<br></p>
  
  <p>please help</p>