Material-ui: [Table] After deleting some rows, the next rows become/stay selected

[Ridermansb]

I asked on StackOverflow, I created a Webpack Bin and asked on Gitter.

Problem description

I have a table with TextFields
When I drop some rows in my table, the next rows become/stay selected.
my state I have selectedStudents and tableData. The selectedStudents are all selected index in my table.

When I click on delete button.. the follow code remove all rows in my tableData and all values in selectedStudents.

Link to minimal working code that reproduces the issue

Webpack Bin

Versions

• Material-UI: ^0.17.1
• React: ^15.4.2
• Browser: Chrome Version 56.0.2924.87 (64-bit)

[Sharlaan]

I confirm the issue:
Somehow the 1st selected index stays always selected after the deletion, despite the selected state being empty array.

[BigMurry]

Try to re-render the whole <TableBody> component when the rows inside of it are changed should walk around this issue.

In Table/TableBody.js file (line 127 - line 143), it says the selected property will have any effects on the rows only when the TableBody component will mount or the allRowsSelected property is changed.

[Ridermansb]

Hi @BigMurry I tried, but not work....

[bertomaniac]

@Ridermansb,

You can force a re-render of the <TableBody/> component, by providing it a key value that only gets changed when you delete an item. Taking the idea from here: http://stackoverflow.com/a/21750576 and combining it with an internal state value, I've managed to get this to work:

this.state = {
...
// tableBodyRenderKey is used to force a complete re-render of the <TableBody/> component 
// when items are removed from the table. This is necessary because <TableBody/> maintains an 
// internal selection of items and has to be re-mounted when those items are removed.
// Following the advice from here: https://github.com/callemall/material-ui/issues/6496
// and here: http://stackoverflow.com/a/21750576

tableBodyRenderKey: 0
}

When removing items, just be sure to increment the key value to force react to re-render the component:

onRemove() {
...
this.setState({tableBodyRenderKey: tableBodyRenderKey+1})
}

and in your render() method:

<TableBody key={tableBodyRenderKey} ... />

[philipodev]

It looks like you store the selected indexes in selectedStudents array. When you click "delete" you also need to remove those indexes from the selectedStudents array.

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