Prevent checkbox and clickable table row conflict

Question

I have a clickable table row and checkbox in that row. When user click on that row, user will be redirected to other page. That was expected behavior. Now the problem is when user click on checkbox, user also will be redirected to other page. This is not the expected behavior. Clicking on checkbox should not trigger redirect() method

  handleChange(e) {
    this.setState({
      checkbox: e.target.checked,
    });
  }

  redirect() {
    Router.push('/registration/register/RegisterEditor', '/verification/e7fe5b68-94e8-435f-8303-5308fd1f7e69');
  }

              <tbody>
                {inventory.list().map((data, index) => (
                  <tr key={'asset'.concat(index)} onClick={() => { this.redirect(); }} tabIndex={index + 1} role="button">
                    <td className="text-center">{index + 1}</td>
                    <td>{data.item}</td>
                    <td width="3%">
                      <Input className="mx-auto" type="checkbox" onChange={this.handleChange} />
                    </td>
                  </tr>
                ))}
              </tbody>

Output:

How can I solve this problem? Thanks in advance.

have you tried stopPropagation in the checkBox click handler? — Sagiv b.g
– Sagiv b.g, Commented Jun 22, 2017 at 11:18
yes, I add e.stopPropagation(); in handleChange() method but did not work. — sg552
– sg552, Commented Jun 22, 2017 at 11:23

Meldon · Accepted Answer · 2017-06-22 11:29:05Z

9

Have a look at this snippet: https://codesandbox.io/s/qx6Z1Yrlk

You have two options:

Adding an if-statement in your redirect function checking what element has been clicked on and only redirect if it's the row (make sure you pass in the event).

Or, listening for a click event on the checkbox as well, passing in the event, and stop the event from bubbling to the row element. stopPropagation won't work in the change event listener as the click event is fired before the change event.

answered Jun 22, 2017 at 11:29

Meldon

8602 gold badges7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sg552 Over a year ago

Thank you for your input. It is helpful.

mamashare Over a year ago

"stopPropagation won't work in the change event listener as the click event is fired before the change event" - that's what I was missing! Thank you!

Sagiv b.g · Accepted Answer · 2017-06-22 11:31:39Z

You can use the stopPropagation in the child's click handler to stop propagating to the parent:

const Parent = props => {
  return (
    <div className="parent" onClick={props.onClick}>
      <div>Parent</div>
      {props.children}
    </div>)
}
const Child = props => {return (<div className="child" onClick={props.onClick} >child</div>) }

class Wrapper extends React.Component{
  constructor(props){
    super(props);
    
    this.onParentClick = this.onParentClick.bind(this);
    this.onChildClick = this.onChildClick.bind(this);
  }
  
  onParentClick(e){
    console.log('parent clicked');
  }
  
  onChildClick(e){
    e.stopPropagation();
    console.log('child clicked');
  }
  
  render(){
    return(
      <Parent onClick={this.onParentClick}>
        <Child onClick={this.onChildClick} />
      </Parent>
    );
  }
}

ReactDOM.render(<Wrapper/>,document.getElementById('app'))

.parent{
  box-shadow: 0 0 2px 1px #000;
  min-height: 60px;
  padding: 10px;
  cursor: pointer;
}

.child{
  box-shadow: 0 0 1px 1px red;
  min-height: 10px;
  max-width: 40px;
  padding: 1px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Collectives™ on Stack Overflow

Prevent checkbox and clickable table row conflict

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related