title: Semantic UI React Dropdown Search - Access autocomplete suggestion on close or enter
body: <p>Versions:</p>
  
  <ul>
  <li>semantic-ui-react: ^0.88.2</li>
  <li>react: ^16.12.0</li>
  </ul>
  
  <p>I have the following:</p>
  
  <pre><code>&lt;Form.Select
      options={form.autocompleteOptions}
      search
      onSearchChange={handleAutocompleteSearch}
      label="CVE Code"
      placeholder="CVE Code"
  /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WCmi6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WCmi6.png" alt="Search input with autocomplete showcase"></a></p>
  
  <p>The autocomplete suggestions work well, and when I press the return key, the rendered label changes to the current option in the menu. However, the value of the Dropdown is not updated and I can't find a way to access it. I am trying to access the value from inside the "onSearchChange" event handler. </p>
  
  <p>In all of the examples below I can only get whatever the user has typed manually into the searchbox, not the "autocompleted" value, even though the renderLabel has changed.</p>
  
  <p>I have tried:</p>
  
  <ol>
  <li>Using the onChange event handler, this never triggers</li>
  <li>Using the Dropdown component directly instead of a Form.Select, but I still cannot access the updated value</li>
  <li>Using the onKeyDownHandler to catch whenever the uses presses "Enter". This event does not seem to provide me with the full value either.</li>
  <li>Using a ref to access the DOM element. I was not able to access the ref, perhaps I was using it wrong.</li>
  <li>Creating a controlled component using the value, however I am not able to update the state to the autocompleted value as I can not access it from any event handler. Image of the dropdown is provided below:</li>
  </ol>
  
  <p>It seems like I might need to use the Semantic UI Search component instead since this has a onResultSelect event handler, but I feel like it should also be possible to use a Dropdown.</p>