Material-ui: Preventing a row from being selected when a child cell is clicked does not work

[zealoushacker]

Problem description

In my use case I have a <SelectField> being rendered in a specific <TableRowColumn>, which allows the user to pick an option for a specific row, which is used elsewhere in the app.

When this <SelectField> is clicked, the <TableRow> in which that field is rendered is selected.

I attempted to prevent this by implementing an onCellClick handler on the containing <Table>:

<Table 
  ... 
  onCellClick={(row, column, evt) => { 
    if (column === 3) evt.stopPropagation(); evt.preventDefault(); 
  } 
  ...
>
  ...
</Table>

The column index in question is _definitely_ 3.

Unfortunately this doesn't seem to do what it ought to, intuitively speaking: prevent that row from being selected or deselected.

i.e.: When the user picks something from a <SelectField> contained in a row, that row should not be selected or deselected.

I've verified that onCellClick is triggered _before_ row selection.

Steps to reproduce

See above.

Versions

• Material-UI: "material-ui": "^0.15.0",
• React: "react": "^15.0.1",
• Browser: Version 50.0.2661.102 (64-bit)

[nehalbhanushali]

@zealoushacker

Use selectable={false} in the desired TableRow

[zealoushacker]

@nehalbhanushali that isn't a workable solution, because I need that row to be selectable, while still giving me the flexibility to manipulate a field within that row.

[Serfenia]

Hey @zealoushacker, what you have to do is write a React component that returns a TableRowColumn, and pass along whatever events you want to be fired.

Example of me:

import React from 'react';
import {TableRowColumn} from 'material-ui';

const TableRowColumnWrapper = React.createClass({

    render() {
        return (
            <TableRowColumn style={this.props.style} onCellClick={this.props.onCellClick}>
                {this.props.children}
            </TableRowColumn>
        );
    }
});

export default TableRowColumnWrapper;

This prevents onRowSelection being called on the given props. You basically have to do nothing instead of using this component as your 'column' that should not call a row selection. So somewhere in your table code:

<TableBody>
    _.map(this.props.data, (item, index) => {
        return (
            <TableRow>
                <TableRowColumn>{item.propertyA}</TableRowColumn>
                <TableRowColumn>{item.propertyB}</TableRowColumn>
                <TableRowColumn>{item.propertyC}</TableRowColumn>
                <TableRowColumnWrapper>
                    {item.propertyD} // You could also render a TextField here to modify some data such as a numeric value
                </TableRowColumnWrapper>
            </TableRow>
        );
    })
</TableBody>

[jonashartwig]

Hi,

I have the same issue. I have a Table with IconButtons inside. Every Row in the Table needs to have different actions. Selection needs to be available too. However if I do the callback like this:

                <TableRow key={index}>
                    <TableRowColumn>{file.timestamp}</TableRowColumn>
                    <TableRowColumn colSpan="2">{file.name}</TableRowColumn>
                    <TableRowColumn colSpan="1">{file.fileSize}</TableRowColumn>
                    <TableRowColumn>{file.path}</TableRowColumn>
                    <TableRowColumn>{file.senderHostname}</TableRowColumn>
                    <TableRowColumn>{file.senderUsername}</TableRowColumn>
                    <TableRowColumn>{file.uuid}</TableRowColumn>
                    <TableRowColumn>{file.env}</TableRowColumn>
                    <TableRowColumn>
                        <IconButton onTouchTap={event => this._download(event, file.id) }><DownloadIcon /></IconButton>
                        <IconButton onTouchTap={event => this._delete(event, file.id) }><DeleteIcon /></IconButton>
                        <IconButton onTouchTap={event => this._preview(event, file.id) }><SearchIcon /></IconButton>
                    </TableRowColumn>
                </TableRow>

_delete (event, fileId) {
    const { archiveDataStore, dispatch } = this.props;

    dispatch(deleteFile(fileId));

    event.stopPropagation();
    event.preventDefault();
}`

The Row gets selected.

[Serfenia]

Hello @jonashartwig, just use a wrapper for the column like I did, then the event won't even pass through to the TableBody and Table

[jonashartwig]

@Serfenia I did not think that the same solution would work, but it does. I bit strange to do it like this. I would assume the event.preventDefault() solution to work.

[zealoushacker]

@jonashartwig that's what I was hoping for as well. I had tried preventDefault() and stopPropagation() with no luck too. I think that interface should be honored.

@Serfenia I think your solution is a good workaround in the meantime.

[Serfenia]

@jonashartwig @zealoushacker Indeed you would suspect it, though the onCellClick is not a 1 on 1 binding with the callback you provide. It stilll calls onRowClick, as the Table property onCellClick is passed down to the TableRow. That is visible here

[aahan96]

@zealoushacker The table component has to be re-designed and hopefully, all the issues that the table component has right now, won't be there in the new component. Meanwhile, let's close this issue. However, if you still have some questions regarding it, you can comment below and we'll look into it! 😄

[ghost]

@zealoushacker: you can try this code

          <TableRowColumn>
            <div onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
            }}>
              <AutoComplete
                id={ `${i + 1}`}
                hintText=""
                dataSource={this.state.titles}
                onUpdateInput={(v) => this.onUpdateInput(v)}

              />
            </div>
          </TableRowColumn>

[jnishiyama]

@ghost Thank you for the code, works like a charm, but I just wanted to add a note that in my case, this does not work when onClick is substituted with onTouchTap.

[timbjames]

For me, @Serfenia 's solution worked to the point of not raising the row select event and highlighting the row, however when you then want to select the row, the background for each of the cells will change apart from the TableRowColumnWrapper cell?

Is this what you are seeing also?

[lolero]

I had the same problem and I was able to work around it by adding a class to the cell and checking the event.target.className on the onClick function.