<p dir="auto">We are using AutoComplete with filtering for selecting options from hundreds of items. But when we specify filter and only one option is visible in suggestions, pressing enter should allow to select it (trigger onNewRequest with this item). Now user have to use keydown to select option and then press enter to select the option. It is a little annoying, especially that using keydown with AutoComplete and openOnFocus is problematic as described in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="169861713" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/4922" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/4922/hovercard" href="https://github.com/mui/material-ui/issues/4922">#4922</a></p>
<p dir="auto">I know that it can break some functionality with selecting values not listed. But connecting this feature with <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="186399220" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/5494" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/5494/hovercard" href="https://github.com/mui/material-ui/issues/5494">#5494</a> can give a great user experience.</p>
<h3 dir="auto">Link to minimal working code that reproduces the issue</h3>
<p dir="auto"><a href="http://www.material-ui.com/#/components/auto-complete" rel="nofollow">http://www.material-ui.com/#/components/auto-complete</a></p>
<ul dir="auto">
<li>example: 'Type 'peah', fuzzy search'</li>
<li>type 'peac' - only one option should be visible</li>
<li>press Enter - option 'Peach' should be selected</li>
</ul>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.18.4</li>
<li>React: 15.4.2</li>
<li>Browser: Chrome, IE</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I would like the ability to modify the default <code class="notranslate">TabScrollButtons</code> when <code class="notranslate">scrollButtons</code> are enabled. This would include the following:</p>
<ol dir="auto">
<li>The ability to change the default SvgIcon for the Scroll Buttons in the Tabs component</li>
<li>The ability to disable the ripple effect for the TabScrollButtons with <code class="notranslate">disableRipple</code></li>
</ol>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When <code class="notranslate">scrollButtons="on"</code>, two button elements are rendered for the previous/next arrows, each with their own SVG (<code class="notranslate">KeyboardArrowRight</code> and <code class="notranslate">KeyboardArrowLeft</code>). I currently am not aware of a solution to replace those with my own SVGs and further customize their settings.</p>
<h2 dir="auto">Current Code</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import Tabs, { Tab } from 'material-ui/Tabs';

const TabBar = ({ tabs, activeTab, setActiveTab }) =&gt;
  (&lt;MaterialTabs&gt;
    &lt;Tabs
      value={activeTab}
      onChange={setActiveTab}
      scrollable
      scrollButtons=&quot;on&quot;
    &gt;
      {tabs.map(({ id, name }) =&gt;
        (&lt;Tab
          key={id}
          label={name}
          value={id}
          disableRipple
        /&gt;),
      )}
    &lt;/Tabs&gt;
  &lt;/MaterialTabs&gt;);

export default TabBar;"><pre class="notranslate"><code class="notranslate">import React from 'react';
import Tabs, { Tab } from 'material-ui/Tabs';

const TabBar = ({ tabs, activeTab, setActiveTab }) =&gt;
  (&lt;MaterialTabs&gt;
    &lt;Tabs
      value={activeTab}
      onChange={setActiveTab}
      scrollable
      scrollButtons="on"
    &gt;
      {tabs.map(({ id, name }) =&gt;
        (&lt;Tab
          key={id}
          label={name}
          value={id}
          disableRipple
        /&gt;),
      )}
    &lt;/Tabs&gt;
  &lt;/MaterialTabs&gt;);

export default TabBar;
</code></pre></div>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.13</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome version 61.0.3163.100</td>
</tr>
</tbody>
</table>