Checkbox: onClick fires parent onClick twice

Bug Report

I just upgraded to v0.85 (from 0.82.5) seeing this release is supposed to fix this issue, https://github.com/Semantic-Org/Semantic-UI-React/pull/3351. My issue might be slightly different though.

I have the following subset of code:

         <li
            onClick={this.liClickHandler}
          >
            <div className="border--left" />
            <div className="infoIconContainer">
              <Popup trigger={<Icon name="info circle" />} content={node.data.tooltipText} inverted />
            </div>
            <div className="checkboxContainer">
              <Checkbox
                id={node.id}
                checked={node.data.active}
                indeterminate={node.data.indeterminate}
                radio={treeType === 'Radio'}
                onClick={e => e.stopPropagation()}
              />...

When the user clicks the checkbox, which is a radio button, it runs the li’s onClick event twice. If the user clicks the li it runs once.

It appears to only do this when I specify the id property. This can be validated in the test case below

Steps

Use the checkbox with an ID specified and a parent click event and note it fires twice. It fires twice for radio and checkboxes.

Put onclick on the checkbox and it only fires once.

Expected Result

it fires once

Actual Result

it fires twice. In debugging the this.liClickHandler, I notice that the event object is slightly different the 2nd time it calls.

First time, event.target is label, the second time it’s the input. Appears both controls are pushing the click.

Version

"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0",

Testcase

https://codesandbox.io/s/88zzv64rn8

[Fabianopb]

I’ve worked on the referred issue #3351 I think I know where the problem could come from, will submit a PR soon!

[layershifter]

Need a 🍻?

We need @levithomason because only he has release rights 😸