Just upgraded from v0.15.1 to v0.15.2 and figured some of the list items in dataSource are not rendered properly. I want the item to show a Primary text and a secondary text under it. Here is how each dataSource item looks like
...
// how each object in dataSource looks like
const dataSourceItem = {
text: 'Primary text',
value: (
<div>
<div style={primaryStyle}>Primary text</div>
<div style={secondaryStyle}>Secondary text</div>
</div>
)
}
...
with v0.15.1, I got

Now with v0.15.2, the value node doesn't seem to be rendered properly. The list only contains the text.

It seems the only workaround is to wrap the list with MenuItem like this.
...
const children = (
<div>
<div style={primaryStyle}>Primary text</div>
<div style={secondaryStyle}>Secondary text</div>
</div>
);
const dataSourceItem = {
text: 'Primary text',
value: (<MenuItem children={children} />)
};
...
Now the items are rendered properly.

It looks like with the new version, I'm not able to use arbitrary node for value anymore. Is this intentional, or a bug introduced with the release?
To reproduce the issue, simply supply a div to value, like my code above.
I confirmed the same behavior on my end with v0.15.2.
Hopefully, this is not intentional. Seems very counter-intuitive to me.
It's been 10 months since this issue ... has anyone had any success in this except the workaround of @realbugger...?
This seems to still the case for me. I would very much like to style the items in the autocomplete as is pictured in the demonstration posted in the ticket, but I'm not sure what styling he's using for _primaryStyle_ and _secondaryStyle_.
Could someone post a bit more information on how to implement this workaround correctly?
Closed by #4783
Olivier, what action do i need to take to have a workable AutoComplete?
@DustinEwan if you follow the trail, you end up here: https://github.com/callemall/material-ui/pull/7477
Most helpful comment
It's been 10 months since this issue ... has anyone had any success in this except the workaround of @realbugger...?