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

[Chip] gets warning when I put inside <p> element #4830

Closed
blmarket opened this issue Jul 26, 2016 · 4 comments
Closed

[Chip] gets warning when I put inside <p> element #4830

blmarket opened this issue Jul 26, 2016 · 4 comments
Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@blmarket
Copy link

Problem description

React warning validateDOMNesting occurs when I put Chip element inside p element. hope Chip uses other than 'div' as containerElement. how about using 'span' instead?

Steps to reproduce

render() {
  <p><Chip ... /></p>
}

javascript console says,

warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See DetailItem > p > ... > Chip > EnhancedButton > div.

Versions

  • Material-UI: 0.15.2
  • React: 15.2.1
  • Browser: electron 1.2.5
@blmarket blmarket changed the title [Chip] warning inside <p> [Chip] get warning when I put inside <p> element Jul 26, 2016
@blmarket blmarket changed the title [Chip] get warning when I put inside <p> element [Chip] gets warning when I put inside <p> element Jul 26, 2016
@blmarket
Copy link
Author

I didn't tested much with 'span', but at least it works on my environment(and hopefully in chrome). I'll create PR for this if it seems okay to be changed.

@mpontikes mpontikes mentioned this issue Aug 5, 2016
13 tasks
@oliviertassinari oliviertassinari added component: chip This is the name of the generic UI component, not the React module! and removed component: chip This is the name of the generic UI component, not the React module! labels Dec 18, 2016
@Shahrukh-Zindani
Copy link

The validateDOMNesting warning was expected when using <p> tags around the Chip component. Use <div> tag instead. @oliviertassinari Does the idea of making a PR to use to use span instead of div to make the Chip component seem okay to you? If yes, then I will make a PR, otherwise this is ready to be closed.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. labels Feb 25, 2017
@oliviertassinari
Copy link
Member

You should be able to use the containerElement property. However, the component doesn't allow it. You need to change the override order. Users should have the highest priority.

@blmarket
Copy link
Author

Sounds great to make a contribution! I'll make a PR to make containerElement configurable.

blmarket added a commit to blmarket/material-ui that referenced this issue Feb 25, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

No branches or pull requests

3 participants