Material-ui table row onClick bypass for checkbox select

Question

I am using the material-ui data table for sorting. This incorporates a checkbox on each row. I have made it that each row returns a click through to a link.

However, I don't want the checkbox to act as a click though and want it to behave as a checkbox and add the row to selected. But when clicking the checkbox the row link is returned.

I need to exclude that cell from the row link or someway to exclude the checkbox.

https://codesandbox.io/s/rlkv87vor4

This is what I have tried for the logic:

Click handler

if (event.target.classList.contains('selectCheckbox')) {
  return console.log('checkbox select');
  } else {
  return console.log('row link');
}

In my demo row link is always being returned when clicking the checkbox.

<TableCell padding="checkbox">
  <Checkbox className="selectCheckbox" checked={isSelected} />
</TableCell>

Ryan Cogswell · Accepted Answer · 2019-02-12T20:50:51.970

The most straightforward way to deal with this is to have two separate handleClick methods for the checkbox and the row (e.g. handleCheckboxClick and handleRowClick).

In handleCheckboxClick you can then call event.stopPropagation(); in order to prevent handleRowClick from being called.

So the following portions of EnhancedTable would change from:

  handleClick = (event, id) => {
    if (event.target.classList.contains("selectCheckbox")) {
      console.log("checkbox select");
    } else {
      console.log("row link");
    }

    const { selected } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    this.setState({ selected: newSelected });
  };
...
<TableRow
  hover
  onClick={event => this.handleClick(event, n.id)}
  role="checkbox"
  aria-checked={isSelected}
  tabIndex={-1}
  key={n.id}
  selected={isSelected}
>
  <TableCell className="selectCheckbox" padding="checkbox">
    <Checkbox
      onClick={event => this.handleClick(event, n.id)}
      className="selectCheckbox"
      checked={isSelected}
    />
  </TableCell>

to something like the following:

  handleCheckboxClick = (event, id) => {
    event.stopPropagation();
    console.log("checkbox select");
    const { selected } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    this.setState({ selected: newSelected });
  };
  handleRowClick = (event, id) => {
    console.log("row link");
  };
...
<TableRow
  hover
  onClick={event => this.handleRowClick(event, n.id)}
  role="checkbox"
  aria-checked={isSelected}
  tabIndex={-1}
  key={n.id}
  selected={isSelected}
>
  <TableCell className="selectCheckbox" padding="checkbox">
    <Checkbox
      onClick={event =>
        this.handleCheckboxClick(event, n.id)
      }
      className="selectCheckbox"
      checked={isSelected}
    />

Here's a CodeSandbox showing this approach:

@MalikBrahimi I recommend that you create your own separate question that demonstrates how to reproduce your problem. — Ryan Cogswell, Jun 30 '19 at 19:11
I figured out my problem. I was using onChange instead of onClick. Do you know what the nuance is between them for a checkbox? — Malik Brahimi, Jun 30 '19 at 19:25
@MalikBrahimi The row is responding to the click event. The row doesn't have an onChange event, so stopping propagation of the onChange event for the Checkbox will have no effect on whether the click event propagates to the row. — Ryan Cogswell, Jun 30 '19 at 19:27
@MalikBrahimi As far as the difference between the events for checkboxes, this is addressed elsewhere (e.g. https://stackoverflow.com/questions/5575338/what-the-difference-between-click-and-change-on-a-checkbox). — Ryan Cogswell, Jun 30 '19 at 19:29

score 2 · Answer 2 · answered Sep 24 '19 at 11:03

Simply add onClick on the checkbox and call e.stopPropagation(); to prevent call onClick twice from the checkbox and from the row component !

handleClick = (event, id) => {
    event.stopPropagation();

    const {selected} = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1),
      );
    }

    this.setState({selected: newSelected});
  };

  <TableRow
                      hover
                      onKeyDown={event => this.handleKeyDown(event, n.id)}
                      role="checkbox"
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.id}
                      onClick={event => onMore(event, n.id)}
                      selected={isSelected}
                    >

                      <TableCell padding="checkbox">
                        <Checkbox color="primary" checked={isSelected}
                                  onClick={event => this.handleClick(event, n.id)}/>
                      </TableCell>
</TableRow>

Dhananjai Pai · Answer 3 · 2019-02-05T10:12:40.417

1

So there are multiple issues here.

1) The className is not a valid property for the Checkbox API https://material-ui.com/api/checkbox/#checkbox-api

2) console.log(event.target) shows that the actual click happens on an svg label used to style the input and not the input itself. So, you cannot directly use inputProps={{className:"selectedCheckbox"}} either and capture the same from the classList

You can refer this sandbox and see how you can get the desired result if you actually click the input : https://codesandbox.io/s/r7j4j638qn

So, a possible answer is to modify the icon property of the Checkbox component and set it to a custom icon with the specified class ? Then it should work as expected.

edited Feb 05 '19 at 10:12

answered Feb 05 '19 at 09:47

Dhananjai Pai

5,914
1
10
25

it still returns "row link" and not "checkbox select", so in my case it would take me to another view rather than simply checking the checkbox – Tom Rudge Feb 05 '19 at 09:51
okay, the title was a bit misleading, I thought you were worried about the click getting bypassed. let me look again – Dhananjai Pai Feb 05 '19 at 09:53
`className` is a valid property for any DOM element and the docs you referenced indicate "Any other properties supplied will be spread to the root element (native element)." – Ryan Cogswell Feb 05 '19 at 15:12
I could not find the className at the event target. Could be a bug? Tried the good ol' console.log() @RyanCogswell – Dhananjai Pai Feb 05 '19 at 15:15
The className is being applied to the outermost `span` that wraps the checkbox input. The overall structure created is ``. – Ryan Cogswell Feb 05 '19 at 15:28

Material-ui table row onClick bypass for checkbox select

3 Answers3