Material UI Autcomplete Result Text in Dropdown
<p>I'm using the Material UI's Autocomplete Component and facing an issue where the value is being displayed instead of the text element. I'm using the following format as my datasource:</p>

<pre><code>[{value: 'someValue', text: 'My Text'}, {value: 'someOtherValue', text: 'Some other Text'}]
</code></pre>

<p>When the user enters a query it correctly finds the matching results but the dropdown itself displays the value instead of the text.</p>

<p><strong>Example</strong></p>

<p>User searches for "My":</p>

<p>Result:</p>

<pre><code>[someValue]
</code></pre>

<p>What I want:</p>

<pre><code>[My Text]
</code></pre>

<p>It actually seems counterintuitive to me the way it works right now.</p>

<blockquote>
  <p>material-ui/AutoComplete/AutoComplete.js [Lines 346-354]</p>
</blockquote>

<p>When i change the source code of the component from:</p>

<pre><code>requestsList.push({
  text: item.text,
  value: _react2.default.createElement(_MenuItem2.default, {
                  innerDivStyle: styles.innerDiv,
                  primaryText: item.value,
                  disableFocusRipple: disableFocusRipple,
                  key: index
                })
              });
</code></pre>

<p>to</p>

<pre><code>requestsList.push({
  text: item.text,
  value: _react2.default.createElement(_MenuItem2.default, {
                  innerDivStyle: styles.innerDiv,
                  primaryText: item.text,
                  disableFocusRipple: disableFocusRipple,
                  key: index
                })
              });
</code></pre>

<p>it works as I need it.</p>

<p>I couldn't find any open issue regarding this. Am I simply doing it wrong?</p>

<p>Best
Matt</p>