Material-ui: Wrap MenuItem as a higher order component

[ralphsmith80]

Description

The MenuItem component does not work as expected when you wrap it with a higher order component.

This looks like a regression between 0.16.5 and 0.16.7.

Problem description

I've been using a higher order components to wrap Material UI components so that we can have a single area for defined default props across a team.

I've recently updated from 0.16.5 to 0.16.7 to get the custom step connector. My SelectFields that contain MenuItems are now broken.

Here's the code I'm using to create a higher order MenuItem with some defaultProps.

import React, {Component} from 'react'
import MenuItemMUI from 'material-ui/MenuItem'

class MenuItem extends Component {
  render() {
    return (
      <MenuItemMUI {...this.props} />
    )
  }
}

MenuItem.defaultProps = {
  className: 'menu-item',
}

export default MenuItem

Link to minimally-working code that reproduces the issue

Here's a codepen with a working example of what I'm doing. I'm pointing to a cdn that I don't own so I'm not sure of the Material UI version, but it's an older version that works as expected in this case.
https://codepen.io/ralphsmith80/pen/XpVGoe

Versions

• Material-UI:
  0.16.7
• React:
  15.4.1
• Browser:
  Chrome Version 55.0.2883.95 (64-bit)

[oliviertassinari]

My SelectFields that contain MenuItems are now broken.

That regression was expected, we rely on the muiName static property to know the nature of the element.
Here is a fixed example http://www.webpackbin.com/EktE3xcDf.

import React, {Component} from 'react'
import MenuItemMUI from 'material-ui/MenuItem'

class MenuItem extends Component {
  render() {
    return (
      <MenuItemMUI {...this.props} />
    )
  }
}

MenuItem.muiName = 'MenuItem';

MenuItem.defaultProps = {
  className: 'menu-item',
}

export default MenuItem

I think that it would be good to have a documentation section about that.
People keep asking how to do it.

[ralphsmith80]

@oliviertassinari, fix confirmed on my end. Thanks!

I agree with needing to add this to the docs. I'm already wondering what other components have this same requirement.

[oliviertassinari]

I'm already wondering what other components have this same requirement.

That's not the only one. I'm wondering how we could improve that coverage knowledge.

[mbrookes]

I'm wondering how we could improve that coverage knowledge.

Sounds like something we could detect in the docs gen script, and add the muiName to the API md...

[oliviertassinari]

I'm closing. I think that the new documentation is answering 80% of the issue.
Autogenerating the components affected would be awesome, but I don't think it should be a priority.