Table - After deleting some rows, the next rows become/stay selected - reactjs

Question

When I drop some rows in my table, the next rows become/stay selected.
In 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.
let diff = _.remove(this.state.tableData, (it, idx) => !~this.state.selectedStudents.indexOf(idx))
this.setState({ tableData: diff, selectedStudents: [] })
The problem is that the rows are deleted but the next rows are selected, and I don't know why
See full image with states details here
This is the full code for this component... or check in WebPack bin
export default React.createClass({
getInitialState: function() {
return {
selectedStudents: [],
tableData: [
{ name: 'John Smith' },
{ name: 'Randal White' },
{ name: 'Stephanie Sanders' },
{ name: 'Steve Brown' },
{ name: 'Joyce Whitten' },
{ name: 'Samuel Roberts' },
{ name: 'Adam Moore' }
]
}
},
// Methods
_onStudentSelected (selected) {
let selectedObjs = []
if (_.isArray(selected)) { // Multiples selections
selectedObjs.push(...selected)
} else if (_.isNumber(selected)) { // One Selection
selectedObjs.push(selected)
} else if (_.isString(selected) && selected === 'all') { // Select all elements
selectedObjs.push(...this.state.tableData.map((it, idx) => idx))
} // None selected
this.setState({ selectedStudents: selectedObjs })
},
_onClickDeleteStudent () {
let diff = _.remove(this.state.tableData, (it, idx) =>
!~this.state.selectedStudents.indexOf(idx))
this.setState({ tableData: diff, selectedStudents: [] })
},
render: function() {
return (
<Table fixedHeader multiSelectable onRowSelection={this._onStudentSelected}>
<TableBody deselectOnClickaway={false}>
{this.state.tableData.map((row, index) => (
<TableRow key={row.name} selected={this.state.selectedStudents.indexOf(index) !== -1}>
<TableRowColumn>
<TextField value={row.name} hintText='Name' />
</TableRowColumn>
<TableRowColumn>
<TextField hintText='Password' type='password' />
</TableRowColumn>
</TableRow>
))}
</TableBody>
<TableFooter adjustForCheckbox>
<TableRow>
<TableRowColumn>
<RaisedButton label='Delete' onClick={this._onClickDeleteStudent}
disabled={this.state.selectedStudents.length <= 0} />
</TableRowColumn>
</TableRow>
</TableFooter>
</Table>
);
}
});
Versions
Package | Version
----------- | ------------------------------------
material-ui | ^0.17.1
react | ^15.4.2
Browser | Chrome Version 56.0.2924.87 (64-bit)
ADDED
Was reported as a bug on issue 6496

Answer 1

In the current stable version 16.7, onRowSelection(indices) of Table component, indices does not reflect the right state after deleting last rows. You may checkout the fixed version via: npm install --save material-ui#next, but it is still under testing so far. Cheers.
Edited:
M.Quan changed the source code and it works okay for me by the way.
Please see https://github.com/callemall/material-ui/issues/6006
"I found the cause of the error at line 131 in
https://github.com/callemall/material-ui/blob/master/src/Table/TableBody.js
componentWillReceiveProps(nextProps) {
if (this.props.allRowsSelected !== nextProps.allRowsSelected) {
if (!nextProps.allRowsSelected) {
this.setState({
selectedRows: [],
});
} else {
this.setState({
selectedRows: this.calculatePreselectedRows(nextProps),
});
}
}
}
When i change that code with the code in version 0.16.6. It worked with me!
componentWillReceiveProps(nextProps) {
if (this.props.allRowsSelected && !nextProps.allRowsSelected) {
this.setState({
selectedRows: this.state.selectedRows.length > 0 ?
[this.state.selectedRows[this.state.selectedRows.length - 1]] : [],
});
// TODO: should else be conditional, not run any time props other than allRowsSelected change?
} else {
this.setState({
selectedRows: this.calculatePreselectedRows(nextProps),
});
}
}
"

Answer 2

Here a simplified modern refactored version of your example :
import React, {Component} from 'react'
import Table from 'material-ui/Table/Table'
import TableBody from 'material-ui/Table/TableBody'
import TableHeader from 'material-ui/Table/TableHeader'
import TableFooter from 'material-ui/Table/TableFooter'
import TableHeaderColumn from 'material-ui/Table/TableHeaderColumn'
import TableRow from 'material-ui/Table/TableRow'
import TableRowColumn from 'material-ui/Table/TableRowColumn'
import TextField from 'material-ui/TextField/TextField'
import RaisedButton from 'material-ui/RaisedButton/RaisedButton'
export default class MyTable extends Component {
state = {
selectedStudents: [],
tableData: [
{ id: 0, name: 'John Smith' },
{ id: 1, name: 'Randal White' },
{ id: 2, name: 'Stephanie Sanders' },
{ id: 3, name: 'Steve Brown' },
{ id: 4, name: 'Joyce Whitten' },
{ id: 5, name: 'Samuel Roberts' },
{ id: 6, name: 'Adam Moore' }
]
}
// Methods
_onStudentSelected = (selected) => {
let selectedStudents = selected === 'all'// Select all elements
? [...this.state.tableData].map(({id}) => id)
: selected
console.log('selected', selected,
'\nSelected students', selectedStudents)
this.setState({selectedStudents})
}
_onClickDeleteStudent = () => {
let tableData = this.state.tableData.filter(({id}) =>
!this.state.selectedStudents.includes(id)
)
this.setState({tableData, selectedStudents: []}, () => {
console.log('After delete', this.state.tableData,
'\nthis.state.selectedStudents', this.state.selectedStudents)
})
}
render () {
console.debug('rendered selectedStudents', this.state.selectedStudents)
const isSelected = id => {
let result = this.state.selectedStudents.includes(id)
console.log('id', id, 'result', result)
return result
}
return (
<Table fixedHeader multiSelectable enableSelectAll onRowSelection={this._onStudentSelected}>
<TableHeader>
<TableRow>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn>Password</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody deselectOnClickaway={false}>
{this.state.tableData.map(({id, name}) => (
<TableRow key={id} selected={isSelected(id)}>
<TableRowColumn>
<TextField value={name} hintText='Name' />
</TableRowColumn>
<TableRowColumn>
<TextField hintText='Password' type='password' />
</TableRowColumn>
</TableRow>
))}
</TableBody>
<TableFooter adjustForCheckbox>
<TableRow>
<TableRowColumn>
<RaisedButton label='Delete' onTouchTap={this._onClickDeleteStudent}
disabled={!this.state.selectedStudents.length} />
</TableRowColumn>
</TableRow>
</TableFooter>
</Table>
)
}
}
Hope it helps despite it not solving your issue. You should raise an issue in Material-UI repo.

Answer 3

please use onTouchTap instead of onClick