Not able to prevent click event propagation on Checkbox/TableSelectRow

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Discover while we implement the ‘onRowClick’ on the table rows with TableSelectRow. I don’t see a way to completely prevent the click from propagating from the Checkbox or the TableSelectRow because the event seems to be from the label https://codesandbox.io/s/sparkling-sky-2d3uj?file=/src/index.js

Is this issue related to a specific component?

Checkbox TableSelectRow

What did you expect to happen? What happened instead? What would you like to see changed?

Checkbox.onClick or TableSelectRow.onSelect should prevent the click from bubbleing up.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

CP4D - WKC

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/sparkling-sky-2d3uj?file=/src/index.js

[tay1orjones]

@nelsonchen90 that codesandbox was super helpful, thanks! I see what you’re saying - the click event associated with the input can be caught through onSelect, but the click event associated with the label can’t be caught through onSelect. This is because the event is placed directly on the input and not on a wrapper of the input and label.

I’m sure there’s some way we can address this. From my understanding, the label for InlineCheckbox never renders visible text or a visible click target. I can’t think of a reason why a consumer would need access to the click event specifically from the label. What might make the most sense here is to immediately call stopPropogation on the label click event internal to InlineCheckbox.

[nelsonchen90]

Sorry for the late response!

@tay1orjones the problem with InlineCheckbox and capture the click event is that there are 2 items being clicked in it

• input
• label

Although we can stop the click event from propagating by using TableSelectRow.onSelect there is still another event being ‘escaped’/propagated from the label.

I have created a super reduced case https://codesandbox.io/s/dark-fog-ubul2?file=/src/index.js