Data Table row checkboxes propagate click events leading to double-handling of row select/unselect

[harveylee]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

CodeSandbox Case (Bug Reports)
Please demonstrate your case at CodeSandbox by using the issue template below. Issues without a test case have much less possibility to be reviewed in detail and assisted.
https://codesandbox.io/s/unruffled-thompson-x8pg2g

Current behavior
Row checkboxes don't stop event propagation

Expected behavior

Row checkbox stops event propagation so click events don't fire twice, e.g. unselecting and then reselecting the row from just one click

Minimal reproduction of the problem with instructions

See the CodeSandbox for demo, or create a data table with selectionMode="multiple" as well as a column with selectionMode="multiple"

1. Click on the first row to select it
2. Click on the first checkbox to try to unselect the row

The row is still selected because the click triggers both the checkbox's and the row's @click events.

What is the motivation / use case for changing the behavior?

I want to be able to select and unselect rows using both the checkboxes and by clicking on the rows.

Please tell us about your environment:

Windows 11

• Vue version: 3.2.31

• PrimeVue version: 3.12.1

• Browser: Chrome Version 99.0.4844.51 (Official Build) (64-bit)