Material-ui: [AutoComplete] not rendering value in dataSource properly with v0.15.2 unless it's a MenuItem

Created on 29 Jul 2016  路  6Comments  路  Source: mui-org/material-ui

Description

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
v0151

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

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.
v0152_menuitem

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?

Steps to reproduce

To reproduce the issue, simply supply a div to value, like my code above.

Versions

  • Material-UI: v0.15.2
  • React: v15.1.0
  • Browser: Google chrome Version 51.0.2704.103 m
Autocomplete

Most helpful comment

It's been 10 months since this issue ... has anyone had any success in this except the workaround of @realbugger...?

All 6 comments

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

Was this page helpful?
0 / 5 - 0 ratings