Customer ListItem of Selectable List doesn't work in material-ui

Question

I used the Selectable List, but if i wrote a custome listitem, the List isn't selectable. If I used listitem directly, the list is selectable.

var DataCenterRow = React.createClass({
    render: function () {
        return (
            < ListItem primaryText = {this.props.datacenter.name}
                rightIconButton= {rightIconMenu}
                value={this.props.index} onTouchTap= {this.selectItem}/>
        );
    }
});

module.exports = DataCenterRow

Mcmann

Please share a complete example, no one will be able to help otherwise. Consider reproducing the issue via jsfiddle.net or something similar. Please share which version of Material UI and ReactJS you're using. – Eczema

Can you show your full code? You will have to make the <List /> component selectable using makeSelectable() – Phil

Answer 1

If you look at the source code of makeSelectable, there is a check for muiName === 'ListItem', so make sure that your customized ListItem have type equals 'ListItem'.

ES6:
static muiName = 'ListItem';

ES5:
DataCenterRow.muiName = 'ListItem';

Don't forget to render DataCenterRow with the style got from outside (because makeSelectable will pass through selectedItemStyle to selected item)

Poling