<p dir="auto">When I provide <code class="notranslate">dataSource</code> values in form of array with objects instead of strings with duplicated <code class="notranslate">text</code> values, for example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[
  { text: 'Some Text', value: &lt;span&gt;{someFirstValue}&lt;/span&gt; },
  { text: 'Some Text', value: &lt;span&gt;{someSecondValue}&lt;/span&gt; }
]"><pre class="notranslate"><code class="notranslate">[
  { text: 'Some Text', value: &lt;span&gt;{someFirstValue}&lt;/span&gt; },
  { text: 'Some Text', value: &lt;span&gt;{someSecondValue}&lt;/span&gt; }
]
</code></pre></div>
<p dir="auto"><code class="notranslate">AutoComplete</code> component renders only one item in <code class="notranslate">Menu</code> because Menu children keys are not unique. It also logs a React error with <code class="notranslate">flattenChildren(...)</code> warning.</p>
<p dir="auto">I know that providing duplicated <code class="notranslate">text</code> values to <code class="notranslate">dataSource</code> is not something normal but I believe that it should be possible. For example I discovered this bug when trying to implement <code class="notranslate">AutoComplete</code> for searching for Facebook fanpages, there could be several fanpages with the same name and I would like to show them all in <code class="notranslate">Menu</code> and provide some additional context for helping user to find desired fanpage. By additional context I mean something like id, photo, maybe link to fanpage.</p>
<p dir="auto">I've tracked down fragment of <code class="notranslate">AutoComplete</code> component code that causes this error <a href="https://github.com/callemall/material-ui/blob/master/src/auto-complete.jsx#L387">link</a>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (typeof request.text === 'string') {
  return React.cloneElement(request.value, {
    key: request.text,
    disableFocusRipple: this.props.disableFocusRipple,
  });
}"><pre class="notranslate"><code class="notranslate">if (typeof request.text === 'string') {
  return React.cloneElement(request.value, {
    key: request.text,
    disableFocusRipple: this.props.disableFocusRipple,
  });
}
</code></pre></div>
<p dir="auto">And I would be more than happy to provide a PR with fix.</p>
<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/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">There seems to be a problem with the typings for TableCellClassKey. In TableCell.d.ts the classname for compact cells is <code class="notranslate">paddingCompact</code>, but in TableCell.js, I see <code class="notranslate">paddingDense</code> being used.</p>
<p dir="auto">This results in the following warning when trying to override the compact padding:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Material-UI: you are trying to override a style that does not exist.
Fix the `paddingCompact` key of `theme.overrides.MuiTableCell`."><pre class="notranslate"><code class="notranslate">Warning: Material-UI: you are trying to override a style that does not exist.
Fix the `paddingCompact` key of `theme.overrides.MuiTableCell`.
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="theme.overrides.MuiTableCell = {
    paddingCompact: {
        padding: '8px 4px',
    },
};"><pre class="notranslate"><code class="notranslate">theme.overrides.MuiTableCell = {
    paddingCompact: {
        padding: '8px 4px',
    },
};
</code></pre></div>
<p dir="auto">Version: latest beta version</p>