I am testing the latest version of Table on the v0.11 branch, which introduces composable Tables (nicely done @jkruder).
Steps To Reproduce the bug:
- Build a Table w/ TableBody and Table Rows that have preselected "selected" props
let tableRows = [];
sortedSuppliers.forEach(function (row) {
tableRows.push(
<TableRow key={'a-supplier-'+row.id} selected={this.props.selectedSupplierIds.indexOf(row.id) !== -1}>
<TableRowColumn>{row.name}</TableRowColumn>
</TableRow>
);
}, this);
return (
<Table
height="400px"
selectable={true}
multiSelectable={true}
onRowSelection={this.onRowSelection}>
<TableHeader enableSelectAll={false}
adjustForCheckbox={true}
displaySelectAll={false}>
<TableRow>
<TableHeaderColumn>Name</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody
displayRowCheckbox={true}
deselectOnClickaway={false}
showRowHover={false}
stripedRows={true}>
{tableRows}
</TableBody>
</Table>
);
- Select a row by clicking the Checkbox (which adds a selectedId)
- Now, remove the row from the selectedIds using an external action, completely outside the state of the Table. The Table and the TableRows will re-render.
Expected Behavior: The TableRow for the removed id becomes unchecked.
Action Behavior: The TableRow remains checked.
I've debugged this, and the TableRow's are rendered with selected={false}, accurately. BUT the TableBody is what controls the state of the checkboxes for each row. And the TableBody does not updated its state of selectedRows when receiving new properties. TableBody doesn't look at the new state of it's children TableRows to determine the new state of selectedRows.
My suggestion is to move the rendering of the checkbox into TableRow itself where it knows the state of the "selected" prop.
Any of this making sense? It's a complicated bug, I know.
I am testing the latest version of Table on the v0.11 branch, which introduces composable Tables (nicely done @jkruder).
Steps To Reproduce the bug:
Expected Behavior: The TableRow for the removed id becomes unchecked.
Action Behavior: The TableRow remains checked.
I've debugged this, and the TableRow's are rendered with selected={false}, accurately. BUT the TableBody is what controls the state of the checkboxes for each row. And the TableBody does not updated its state of selectedRows when receiving new properties. TableBody doesn't look at the new state of it's children TableRows to determine the new state of selectedRows.
My suggestion is to move the rendering of the checkbox into TableRow itself where it knows the state of the "selected" prop.
Any of this making sense? It's a complicated bug, I know.