Checkbox fires two events on click

[amcheshire]

Environment

• Package version(s): 3.15.0
• Browser and OS versions: Mac OS Mojave 10.14.3, Chrome 73.0.3683.86

Steps to reproduce

1. Run the following app:

import React, { useState } from 'react'
import { HTMLTable, Checkbox } from '@blueprintjs/core';

export default Test

function Test(props: any) {
  const [isChecked, setIsChecked] = useState(false)

  return (
    <HTMLTable>
      <thead>
        <tr>
          <th>Checkbox</th>
        </tr>
      </thead>
      <tbody>
        <tr onClick={event => handleClick()}>
          <td><Checkbox checked={isChecked}/></td>
          <td>Click here and it works!</td>
        </tr>
      </tbody>
    </HTMLTable>
  )

  function handleClick() {
    setIsChecked(!isChecked)
  }
}

2. Click row or checkbox

Actual behavior

When clicking row, checkbox is toggled.

When clicking checkbox, it does not change. I inserted some debuggers to see what was happening and it turns out that there are many events being fired. Here are the events I saw:

1. onClick for the tr, with target=span.bp3-control-indicator
2. onClick for the Checkbox, with target=input
3. onClick for the tr, with target=input

The states get weird in between these and it essentially somehow sets isChecked to true, then false.

Expected behavior

When clicking row, checkbox is toggled.

When clicking checkbox, checkbox is toggled.

Possible solution

Giving the Checkbox an onClick={event => event.stopPropagation()} fixes the issue. However, it's worth noting that this does not work if you do onChange instead.

Ideally, we would be able to not give the Checkbox an onClick.

[adidahiya]

Can you try working around it by checking event.target === event.currentTarget in handleClick?

Edit: @martijnarts's answer below and the linked StackOverflow post is helpful. There is a problem with the current design of Blueprint's control elements where this double click behavior will continue to happen if you attach an onClick handler to any parent of a <Checkbox> or <Switch>. We can fix this in a future major version of Blueprint by making <input> a sibling of <label>, but that would be a breaking change. I will consider this for Blueprint v6.0.

[amcheshire]

That also works as a workaround.

I think a better question to ask would be: Is this the intended behavior?

I've been experimenting with a few component libraries and blueprint is the first one that has given me this problem. However, I could see this being the desired behavior in some cases.

[martijnarts]

If it helps, this is standard HTML behaviour: clicking the label element in the Checkbox also triggers a separate click event on the checkbox (in addition to its own click event), both of which then bubble up to the parent elements.

See also this StackOverflow question.