CODEWITHSUNDEEP
reactjsmaterial-ui
kprim
kprim

Reputation: 243

SelectableList does not display Selected item when selection change

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.

Upvotes: 0

Views: 4370

Answers (2)

kprim
kprim

Reputation: 243

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>
        );
    }
}

Upvotes: 2

erik-sn
erik-sn

Reputation: 2600

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.

Upvotes: 0

Related Questions