Skip to content

[TableBody] checkboxes do not reflect new selected state of TableRows (v0.11) #1345

Description

@rscheuermann

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:

  1. 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>
        );
  1. Select a row by clicking the Checkbox (which adds a selectedId)
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: tableChanges related to the table.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions