title: How to add a clear button to the auto complete field in material-ui
body: <p>I am using Material-UIs AutoComplete Component (v0.15.4) to implement kind of a filter. To improve the user experience I want to add a clear button (Icon Button component?) inside or next to it which simply clears the current input (like in the pictures of the <a href="https://material.google.com/components/text-fields.html#text-fields-auto-complete-text-field" rel="nofollow">Google Specification for Auto-complete text fields</a>).</p>
  
  <p>Since the AutoComplete uses the TextField, I thought of giving an ListItem or MenuItem to the "value" of the TextField and use the rightIcon(Button). But the AutoComplete only allows String as "SearchText" (whic internaly is uses to fill the "value" field of the TextField).</p>
  
  <p>So since I can not put an other component inside the "searchText" I end up with the idea of wrapping the AutoComplete inside a ListItem like this:</p>
  
  <pre><code>&lt;ListItem
    primaryText={&lt;AutoComplete
      dataSource={ dataSource }
      filter={AutoComplete.fuzzyFilter}
      hintText="Select Filter"
      onNewRequest={this.handleSelect.bind(this)} /&gt;}
    rightIconButton={&lt;IconButton
      onClick={this.handleClearClick.bind(this)}&gt;
        &lt;ClearIcon /&gt;
      &lt;/IconButton&gt;}
  /&gt;
  </code></pre>
  
  <p>But this way the clear icon appears behind the auto complete input field and I do not really need/want the list (item).</p>
  
  <p>Are there any other idea of solving this problem? Or is maybe the clear-function (or more generic "rightIconButton" field) planed for future version of Material-UI?</p>