[ListItem] rightIconButton: style bug with custom IconMenu component

[Colmea]

Hello,

First of all, thanks for you awesome work on this library ;)

I have several position bugs when using custom components Here is an example with a custom IconMenu used in a ListItem.rightIconButton:

// With my custom component
<ListItem>
    [...]
    rightIconButton={<CustomComponentListMenu />}
/>

// CustomComponentListMenu.jsx
[...]
render() {
        return (
            <IconMenu iconButtonElement={this.iconButtonElement} >
                <MenuItem onClick={this.onDelete}>Delete</MenuItem>
            </IconMenu>
        );
    }

The IconMenu works well, but the position of the icon menu is not good (see attached screenshot).

Actually, I think the issue is that style (position: absolute, right: 4, top: 12) is applied to my custom component tag (< CustomComponentListMenu> ) and NOT the IconMenu tag (< IconMenu>).
See ListItem.js:622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622) where rightIconButtonElement is my custom element and not the iconMenu.

I understand it's not really a bug, but it's a serious limitation when using custom component (that's the whole point of React, isn't it ?).

Note that this "bug" also appears with other components, like Avatar in ListItem.leftAvatar.

Screenshot:

Do you think we can find a solution to allow custom component ?

Versions

Material-UI: 0.15.0
React: 14.7
Browser: Chrome, Firefox

[jlroettger]

I just experienced this same strange behavior. After digging into it, it would seem that the rightIconButton prop wants an element, not a component. Try changing rightIconButton={<CustomComponentListMenu />} to rightIconButton={(new CustomComponentListMenu).render()}. For stateless functional components, try <Component /> -> Component().

(Note that React.createElement(Component) does not work; I haven't looked into the details as to why)

I just started using React and I don't know if this is intentional or not, but an error message when rightIconButton is set to a component instead of an element may be in order, instead of failing in this perplexing way.

[jonespen]

Are you passing down ...props? I had the same problem for Avatar. I guess MUI sets some props internally.

My custom Avatar component looks like this:

...
const Avatar = (props) => {
  const propsWithoutMember = { ...props };
  delete propsWithoutMember.member;
  return (
    <MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
  );
};
...

I had to remove my custom proptypes before passing it down, otherwise MUI would complain about unknown props.

[jlroettger]

Yeah this was a just-starting-out-with-React mistake, only needed to pass ...props

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.