[Table] onRowSelection fires twice after initial selection

[jaybkun]

Problem description

I have a handler for the onRowSelection event on a table. The handler sets a item.selected flag on an array of objects in my state object. I cannot deselect using the toggle all button if there is anything on the table

Steps to reproduce

Create an empty array object in state

this.state = {items: []}

Use the following form to populate the table when items are added to thelist

<Table selectable={true} multiSelectable={true} onRowSelection={this.handleRowSelect}>
<TableBody>
{this.state.items.map((item, idx) => {
  return <TableRow selected={item.selected}>
           <TableRowColumn>{item.name}</TableRowColumn>
         </TableRow>})}
</TableBody>
</Table>

Have an event handler for the row selection

handleRowSelect(rows) {
  window.console.debug('firing: ', rows);
  let newItems= [];
  if (rows === 'all' || rows === 'none') {
    newItems= this.state.items.map(item => {
        item.selected = (rows === 'all');
        return item;
  } else {
    newItems= this.state.items.map((item, idx) => {
        item.selected = _.includes(rows, idx);
        return item;
  }
  this.setState({items: newItems});
}

Add items to the list

addItem(item) {
  item.selected = false;
  this.setState({items: [...this.state.items, item]});
}

Click the 'select all' toggle
Click the 'select all' toggle again

Versions

• Material-UI: "^0.15.0",
• React: "^15.1.0",
  
• Browser: Chrome

[jaybkun]

There also seems to be an issue with the table intercepting other events.

I have a raised button with an 'onClick' handler that will currently only list items that are selected. When I fire it I'm seeing the onRowSelection handler fire with a 0 sized array

[zealoushacker]

Definitely saw this in my implementation just now @jaybkun. Pretty infuriating.

[maxdeviant]

@jaybkun I am seeing the second issue you posted with the table intercepting other events.

Do you think the two are related, or should we open a new thread with that issue?

[maxdeviant]

Scratch that, the issue I thought I was seeing was because I had left the deselectOnClickaway option on (it defaults to true), which is why the rows seemed to be deselecting themselves when the button was clicked.

<TableBody deselectOnClickaway={false}>
    ...
</TableBody>

@jaybkun See if this fixes your issue.

[brycejacobs]

I can confirm this, if you press the 'Select All' checkbox while it's already selected, you will receive two callback fires.

[]
all

[prabhu]

Any updates?

[viotti]

@maxdeviant deselectOnClickaway={false} fixed it for me.

[sandeshdamkondwar]

This is happening with me again. onRowSelection is getting fired twice if I select/deselect all.
deselectOnClickaway={false} trick is not working for me.

[mauron85]

Same here

[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.