Material-ui: [Table] TableRow selected acts like defaultSelected

[dennischen]

Problem description

It is maybe my misunderstanding, but the TableRow doesn't respect the selected prop.
try following code snippet, I can select any row no matter I set a static false.
It looks like a defaultSelected behavior, not selected

import * as React from 'react';
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';


export class TableSelectIssue extends React.Component<any, any>{
    render() {
        return <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>ID</TableHeaderColumn>
                    <TableHeaderColumn>Name</TableHeaderColumn>
                    <TableHeaderColumn>Status</TableHeaderColumn>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow selected={false}>
                    <TableRowColumn>1</TableRowColumn>
                    <TableRowColumn>John Smith</TableRowColumn>
                    <TableRowColumn>Employed</TableRowColumn>
                </TableRow>
                <TableRow selected={false}>
                    <TableRowColumn>2</TableRowColumn>
                    <TableRowColumn>Randal White</TableRowColumn>
                    <TableRowColumn>Unemployed</TableRowColumn>
                </TableRow>
                <TableRow selected={false}>
                    <TableRowColumn>3</TableRowColumn>
                    <TableRowColumn>Stephanie Sanders</TableRowColumn>
                    <TableRowColumn>Employed</TableRowColumn>
                </TableRow>
                <TableRow selected={false}>
                    <TableRowColumn>4</TableRowColumn>
                    <TableRowColumn>Steve Brown</TableRowColumn>
                    <TableRowColumn>Employed</TableRowColumn>
                </TableRow>
            </TableBody>
        </Table>
    }
}

Versions

• Material-UI: 0.16.7
• React: 15.4.2
• Browser: Chrome 55.0.2883.87 m (64-bit)

[tranduytrung]

Looking at the implementation, the "selected" property are only calculated once when the TableBody component will be mounted, so the "selected" property of TableRow does not reflect the changes. Poor implementation!

[dennischen]

I just had a workaround for this.
when rendering, I always assign a different key on TableBody to make it always be rerendered.
code is like

    render() {
        this.tableBugWorkaround = this.tableBugWorkaround>0?0:1;
        return <Table onRowSelection={this.onRowSelection}>
...
            <TableBody ... key={this.tableBugWorkaround}>
 ...
            </TableBody>
        </Table>
    }

I am not sure this will cause bad performance or not.

[rochdev]

Same problem here. It started after upgrading to 0.16.7. The only change I could find related to row selection is from https://github.com/callemall/material-ui/pull/5905

[mquandvr]

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),
      });
    }
  }

[jnishiyama]

@mquandvr Thank you for the fix, I think you should make a PR, because, at least for me, this is a serious issue, and still present in 0.17.

[Serfenia]

Any reason why the pull request for this issue is still Open?

[Ray0315]

When i change that code

{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {        
      if (this.props.allRowsSelected && !nextProps.allRowsSelected) {
        this.setState({
          selectedRows: this.state.selectedRows.length > 0 ?
            this.calculatePreselectedRows(nextProps) : [],
        });
        // TODO: should else be conditional, not run any time props other than allRowsSelected change?
      } else {
        this.setState({
          selectedRows: this.calculatePreselectedRows(nextProps),
        });
      }
    }
 }

[brucemcpherson]

Same problem with the {selected} value not being respected consistently
I logged out the value of sel and even when it logged true, it was not rendered a selected. This happens when just preceded by some other change in the table ( toggle change in my case)
<TableRow key={i} selected={sel}

I got round by assigning different table keys for each render

    const tableKey = new Date().getTime();
    const xcs =
      <Table    
        key={tableKey}