Checkbox bubbles onClick event twice
See original GitHub issue🐛 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
- wrap a
Checkbox
with a parent that has anonClick
handler
<Box onClick={() => console.log('CLICK!')}>
<Checkbox>Click Me!</Checkbox>
<Box>
- 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 |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:18 (2 by maintainers)
Top Results From Across the Web
On element click Trigger event fire twice for input checkbox
JQuery uses event bubbling when setting up events. This means that when you click the input the event is fired once ...
Read more >10673 (Label .on('click') may fire twice) - jQuery - Bug Tracker
It's just normal event bubbling, slightly complicated by the fact that the browser clicks the check box when you click the label. As...
Read more >Event Bubbling and Event Catching in JavaScript and React
She has a single parent div with an onClick event handler that, when clicked, calls everyone to the table to eat her food....
Read more >How to handle Click Events in Cypress | BrowserStack
Read tutorial to perform different click events such as click, right-click, double-click, and trigger event in Cypress using examples.
Read more >Fix for ASP.NET Checkbox -jQuery click event getting fired ...
Whether its <label> or <span>. If its <label> or <span> then the click event will be fired twice. As explained earlier, click event...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 byuseCheckbox
.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.
Closing based on inactivity