[Bug]: Checkbox onClick event firing twice not allowing checkboxes to be selected

[kevinsperrine]

Package

carbon-components-react

Browser

Chrome

Package version

v10.48.0

Description

The onClick event is being fired on both the label and the input causing the checkbox to check and immediately uncheck.

CodeSandbox example

https://react.carbondesignsystem.com/?path=/story/components-checkbox--playground
https://codesandbox.io/s/cool-lederberg-qwoc1?file=/src/index.js

Steps to reproduce

Try to select a checkbox in the playground. https://react.carbondesignsystem.com/?path=/story/components-checkbox--playground

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

Hey @kevinsperrine! Sorry you ran into this. For implementing a controlled checkbox, the onChange is the intended way to catch updates and set local state.

function ExampleComponent() {
  const [isChecked, setIsChecked] = useState(false);
  return <Checkbox checked={isChecked} onChange={setIsChecked} />;
}

The onClick was added recently in #9827 and admittedly makes the Checkbox API a bit more confusing. The intent of onClick was to provide a handler to control the bubbling of click events from Checkbox without having to implement your own wrapper component/element.

I think this is something that would benefit being documented more thoroughly in the storybook. I'll put together a PR.

[bjornalm]

@tay1orjones or @sstrubberg
Can you reopen this one? The additional event from the click is still causing problems even when using onChange if the wrapping element also needs a click event handler. See https://codesandbox.io/s/proud-hooks-c96dc?file=/src/index.js

In order to work around this I have to add an onClick handler to the Checkbox and call stopPropagation on the event just to stop the wrapping element from also firing twice.

[tay1orjones]

@bjornalm Sorry for the hassle with this. I think we can mirror Checkbox to have parity with recent changes to InlineCheckbox #10151 and only allow click events to propagate from the input and not the label.