Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AutoComplete] not rendering value in dataSource properly with v0.15.2 unless it's a MenuItem #4852

Closed
realbugger opened this issue Jul 29, 2016 · 6 comments
Labels
component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@realbugger
Copy link

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
@CreepGin
Copy link

I confirmed the same behavior on my end with v0.15.2.

Hopefully, this is not intentional. Seems very counter-intuitive to me.

@ahmedtabrez
Copy link

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

@DustinEwan
Copy link

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?

@oliviertassinari
Copy link
Member

Closed by #4783

@DustinEwan
Copy link

Olivier, what action do i need to take to have a workable AutoComplete?

@luxflux
Copy link

luxflux commented Jul 20, 2017

@DustinEwan if you follow the trail, you end up here: #7477

@oliviertassinari oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Apr 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

6 participants