SelectableList does not display Selected item when selection change

Question

I have an issue with a SelectableList. When i display the list for the first time, the default defined item is selected in the list. But when i click on a different item of the list, the item does not appears as selected in the list, and the index is undefined. any suggestions ?

This is the sample code of my SelectableList :

import React from 'react';
import {List, ListItem, MakeSelectable} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';

const SelectableList = MakeSelectable(List);

class ListExampleSelectable extends React.Component {

    constructor() {
      super();
    }

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });
    }

    handleRequestChange(event, index) {
      this.setState({
        selectedIndex: index,
      });
      console.log(index);
    };

    render() {
        return ( 
           <SelectableList value = {this.state.selectedIndex}
            onClick = {this.handleRequestChange.bind(this)} >
            
                <ListItem value="1" primaryText="Menu1" leftAvatar={<Avatar src="img1.png" />}/>
                <ListItem value="2" primaryText="Menu2" leftAvatar={<Avatar src="img2.png" />}/>
                <ListItem value="3" primaryText="Menu3" leftAvatar={<Avatar src="img3.png" />}/>
            </SelectableList>
        );
    }
}

export default ListExampleSelectable;

and i use my component like this:

import MyList from './ExampleSelectable.jsx';

and inside a drawer i have :

<MyList defaultValue="1"/>

The list is displayed with the first item selected, but when i click on a different item, the selection does not move on the clicked item.

score 2 · Accepted Answer · edited May 23 '17 at 12:17

Finally, things are working great. keep in mind these few things if you have this issue:

1- Like @erik-sn said, material-ui uses onChange instead of onClick as the event handler

2- I wasn't including the react-tap-event-plugin that's why the click events not registered and handled. So install the react-tap-event-plugin. Material-ui Components use react-tap-event-plugin to listen for touch / tap / clickevents. More info on the Material-ui getting started page. More infos about react-tap-event-plugin here.

Usage after installation :

var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin();

3- To avoid the undefined value when using (or printing) the index value of the clicked List Item, dont forget to bind to the component in order to have access in the callback (more detail on this post : React this.setState is not a function

This is the final code of my SelectableList component (ps: dont mind the class name and method....)

import React, {Component, PropTypes} from 'react';
import Avatar from 'material-ui/Avatar';
import {List, ListItem, MakeSelectable} from 'material-ui/List';

let SelectableList = MakeSelectable(List);

export default class DashboardPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {selectedIndex: 1};
        }

    handleRequestChange (event, index) {
        this.setState({
            selectedIndex: index
        })
    }

    render() {
        return (<div>{this.renderAside()}</div>);
    }

    renderAside() {
        return (
            <SelectableList value={this.state.selectedIndex} onChange={this.handleRequestChange.bind(this)}>
                <ListItem value={1} primaryText="Menu1" leftAvatar={<Avatar src="img1.png" />}/>
                <ListItem value={2} primaryText="Menu2" leftAvatar={<Avatar src="img2.png" />}/>
                <ListItem value={3} primaryText="Menu3" leftAvatar={<Avatar src="img3.png" />}/>
                <ListItem value={4} primaryText="Menu3" leftAvatar={<Avatar src="img4.png" />}/>
            </SelectableList>
        );
    }
}

Note: makeSelectable is not currently part of the v1 roadmap, see: https://github.com/callemall/material-ui/issues/7270 — hillmark, Sep 13 '17 at 12:54

erik-sn · Answer 2 · 2016-09-08T01:15:42.010

0

I believe that material-ui uses onChange instead of onClick as the event handler:

   render() {
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {this.props.children}
        </ComposedComponent>
      );
    }

So when you click it is calling your function - But passing no parameters to it. Try changing it to onChange.

edited Sep 08 '16 at 01:15

answered Sep 08 '16 at 01:10

erik-sn

2,590
1
20
37

Nothing happens when i use the `onclick` event, seems like the `handleRequestChange` function is not even called... – kprim Sep 08 '16 at 01:18

SelectableList does not display Selected item when selection change

2 Answers2

Linked