Parent click handler is always executing first

user_2184584 0
Viewed 64

I have a simple list:

<li onClick={handleRowClick}>
 <input type="checkbox" onClick={handleCheckboxClick} />
 ...
</li>

When I click in any place on the li (except its checkbox child), handleRowClick executes.

When I click on the checkbox, it always executes in this order:

row
row
checkbox

Here's what I've tried

  1. using onClickCapture on each: checkbox, li, and both
  2. calling e.stopPropagation() on each: checkbox, li, and both
  3. calling e.nativeEvent.stopPropagation() on each: checkbox, li, and both
  4. calling e.nativeEvent.stopImmediatePropagation() on each: checkbox, li, and both
  5. calling e.nativeEvent.preventDefault() on each: checkbox, li, and both

With the code above, at some point the order became

row
checkbox

But the row is always executed BEFORE the checkbox, so I can't see how make them not overlap.

Also worth mentioning that both handlers have logic, that need to happen, so making the row never execute any code is not an option.

This seems like a trivial thing, like I should know the answer to this. What am I missing?

Edit

Here's the minimal reproducible example: https://codesandbox.io/s/shy-shape-u1me4?file=/src/App.js

In the example above I stripped a lot of things like CSS classes. While doing that, I realised that what I'm actually clicking is a label for the checkbox, and the checkbox is "hidden" in my app.

I solved the problem by moving the event handler to the label instead of the checkbox, and running:

  1. e.stopPropagation() to prevent propagation to the parent li.
  2. e.preventDefault() to prevent the label to trigger the checkboxes o'clock, which would also cause the event to propagate to the li above.
reactjs javascript
1 Answers

The problem seem to be that my UI library hides the actual input, and the visible area where I was clicking was actually the label. These 2 elements are siblings related by the id and htmlFor attributes respectively.

As I was attaching the event handler on the input, but the label was the one actually being clicked, the propagation was not properly being stopped.

I solved the problem by moving the event handler to the label instead of the checkbox, and running:

  1. e.stopPropagation() to prevent propagation to the parent li.
  2. e.preventDefault() to prevent the label to trigger the checkboxes o'clock, which would also cause the event to propagate to the li above.
<li onClick={handleRowClick}>
 <input id="c-1" type="checkbox" />
 <label htmlFor="c-1" onClick={handleCheckboxClick}>Foo</label>
 ...
</li>


const handleCheckboxClick = () => {
  e.stopPropagation()
  e.preventDefault()
}
user_21845840
Related