Checkbox bubbles onClick event twice

🐛 Bug report

When a Checkbox is the child of an element that has an onClick handler, clicking the Checkbox causes the handler to be fired twice.

💥 Steps to reproduce

1. wrap a Checkbox with a parent that has an onClick handler

<Box onClick={() => console.log('CLICK!')}>
  <Checkbox>Click Me!</Checkbox>
<Box>

1. Click the checkbox and observe that the parent’s onClick is fired twice

💻 Link to reproduction

https://codesandbox.io/s/strange-thunder-v1ccm

🧐 Expected behavior

Click handler should only fire once.

This is also a relatively common use case - I am wrapping the checkbox with a parent to create a larger “click area” around the checkbox, and a isChecked value is being passed down to the Checkbox to control it.

Adding a onChange handler to the Checkbox has no effect.

My current workaround is to detect checkbox clicks and avoid firing the handler:

<Box
  onClick={event => {
    if (event.target.nodeName !== 'INPUT') onClick();
  }}
>
  <Checkbox>Click Me!</Checkbox>
<Box>

This is obviously a hacky, non-ideal fix

🌍 System information

Software	Version(s)
Chakra UI	1.0.3
Browser	Chrome 87.0.4280.88
Operating System	macOS Catalina 10.15.3

[digitaltoad]

Although this is indeed how bubbling works, unless I’m missing something, I’ve noticed that I cannot stop propagation from the checkbox. For instance, if a checkbox is in a table row, I want to interact with the checkbox without the click bubbling to the table row. This seems to be related to the fact that a click handler never makes it to the Label on the checkbox. This can be seen in the getRootProps returned by useCheckbox.

getRootProps

https://github.com/chakra-ui/chakra-ui/blob/main/packages/checkbox/src/use-checkbox.ts#L276-L303

getRootProps usage in Checkbox

https://github.com/chakra-ui/chakra-ui/blob/main/packages/checkbox/src/checkbox.tsx#L151

If I’m misunderstanding this, please let me know or at least point me in the right direction. If this is not the intended functionality, I would be happy to submit a PR.

[segunadebayo]

Closing based on inactivity