<h3 dir="auto">Problem description</h3>
<p dir="auto">I am trying to wrap ListItem into a custom component to reduce boilerplate/duplicates in my code.<br>
Original code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    &lt;SelectableList id=&quot;menu&quot; value={location}&gt;
        &lt;ListItem primaryText=&quot;Encoding&quot; primaryTogglesNestedList={true} value=&quot;/encoding&quot; nestedItems={[
            &lt;ListItem primaryText=&quot;Base32&quot; containerElement={&lt;Link to=&quot;/base32&quot;/&gt;} value=&quot;/base32&quot;/&gt;,
            &lt;ListItem primaryText=&quot;Base32Hex&quot; containerElement={&lt;Link to=&quot;/base32Hex&quot;/&gt;} value=&quot;/base32Hex&quot;/&gt;,
            &lt;ListItem primaryText=&quot;Base64&quot; containerElement={&lt;Link to=&quot;/base64&quot;/&gt;} value=&quot;/base64&quot;/&gt;,
            &lt;ListItem primaryText=&quot;Base64Url&quot; containerElement={&lt;Link to=&quot;/base64url&quot;/&gt;} value=&quot;/base64url&quot;/&gt;,
            &lt;ListItem primaryText=&quot;Hex&quot; containerElement={&lt;Link to=&quot;/hex&quot;/&gt;} value=&quot;/hex&quot;/&gt;"><pre class="notranslate">    <span class="pl-c1">&lt;</span><span class="pl-ent">SelectableList</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"menu"</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">location</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Encoding"</span> <span class="pl-c1">primaryTogglesNestedList</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/encoding"</span> <span class="pl-s1">nestedItems</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Base32"</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/base32"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/base32"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Base32Hex"</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/base32Hex"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/base32Hex"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Base64"</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/base64"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/base64"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Base64Url"</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/base64url"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/base64url"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Hex"</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/hex"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/hex"</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">as you can see - a lot of duplicities (running version to be inspected can be found <a href="https://www.decrane.io/" rel="nofollow">here</a>).</p>
<p dir="auto">So I decided to wrap the component to get rid of duplicates:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const MenuItem = ({anchor, ...other}) =&gt; (
      &lt;ListItem value={anchor} {...other} key={&quot;item-&quot;+ anchor}/&gt;
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">MenuItem</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>anchor<span class="pl-kos">,</span> ...<span class="pl-s1">other</span><span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">anchor</span><span class="pl-kos">}</span> <span class="pl-kos">{</span>...<span class="pl-s1">other</span><span class="pl-kos">}</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">"item-"</span><span class="pl-c1">+</span> <span class="pl-s1">anchor</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">But the menu item is no longer selectable (try difference between these two sementically identical approaches)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const App = () =&gt; (
  &lt;MuiThemeProvider muiTheme={getMuiTheme()}&gt;
    &lt;SelectableList id=&quot;menu&quot; value=&quot;/li&quot;&gt; {/* Change here to /mi, update, run -&gt; MenuItem is not selected */}
      &lt;ListItem primaryText=&quot;ListItem&quot; value=&quot;/li&quot; /&gt;
      &lt;MenuItem primaryText=&quot;MenuItem&quot; anchor=&quot;/mi&quot; /&gt;
    &lt;/SelectableList&gt;
  &lt;/MuiThemeProvider&gt;
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">App</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">MuiThemeProvider</span> <span class="pl-c1">muiTheme</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">getMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">SelectableList</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"menu"</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/li"</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span><span class="pl-c">/* Change here to /mi, update, run -&gt; MenuItem is not selected */</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">ListItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"ListItem"</span> <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-s">"/li"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"MenuItem"</span> <span class="pl-c1">anchor</span><span class="pl-c1">=</span><span class="pl-s">"/mi"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">SelectableList</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">MuiThemeProvider</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Example on JsFidle: <a href="https://jsfiddle.net/1vk8wzoc/27/" rel="nofollow">https://jsfiddle.net/1vk8wzoc/27/</a><br>
I have asked on <a href="http://stackoverflow.com/questions/42541896/material-ui-menu-refactoring/42551540#42551540" rel="nofollow">StackOverflow</a> and user Chris pointed out the probable <a href="https://github.com/callemall/material-ui/blob/master/src/List/makeSelectable.js#L18">cause</a>. I would create a PR, but I am just a beginner when it comes to React, so my repair would probably cause more harm than good :-).</p>
<ul dir="auto">
<li>Material-UI: "material-ui": "^0.16.6",</li>
<li>React: "react": "^15.0.1",</li>
<li>Browser: Chrome Version 56.0.2924.87</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"><code class="notranslate">AutoComplete</code>'s suggestions dropdown list should display as <code class="notranslate">Select</code>'s options list display in a <code class="notranslate">TableCell</code>.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><code class="notranslate">Autosuggest</code>'s suggestions list was hidden behind TableCell layer while putting an <code class="notranslate">AutoComplete</code> / <code class="notranslate">Autosuggest</code> component in a <code class="notranslate">TableCell</code>.</p>
<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>v1 beta 16</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome / Firefox</td>
</tr>
</tbody>
</table>