Data Table row checkboxes propagate click events when a checkbox is unchecked

[MassimoBev]

Describe the bug

If I have a checkbox inside a DataTable when I uncheck it the row is clicked, and if there is an Event associated with the row-click, it will be triggered.
This should not happen.

I can't reproduce the Bug in codesandbox because the combination Vue 3.3.4 and Primevue 3.29.2 is not possible

Reproducer

https://codesandbox.io/s/modest-feather-dmd5ql?file=/src/App.vue

PrimeVue version

3.29.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Firefox, Chrome

Steps to reproduce the behavior

1)Check a Checkbox inside a DataTable
2)Unchecked the Checkbox -> the row is clicked and the event is called

Expected behavior

When a checkbox is unchecked soll the row not be clicked

[tugcekucukoglu]

I guess there is a misunderstanding here. Multiple selection and checkbox selection have different behaviors.

https://primevue.org/datatable/#multiple_rows_selection
https://primevue.org/datatable/#checkbox_row_selection

Which one do you want to use?

[MassimoBev]

@tugcekucukoglu This is what I have and when I unchecked the Checkbox from a row "myFunction" is called

<DataTable
v-model:selection="mySelection"
v-model:first="first"
v-model:rows="rows"
@row-click="myFunction"
@row-dblclick="myFunction2">

  <Column selection-mode="multiple"/>
  <Column>
  <template #body="{myData}">
      <i v-if="myData.showIt" class="myClass"/>
  </template>
  </Column>

  ...

[alexandrapopa96]

I have the same issue.

For now I used as work around: @row-unselect="isRowUnselectEvent = true" and handle the const in the rowClick event:
const onRowClick = event => { if (!isRowUnselectEvent.value) {..} }

[tugcekucukoglu]

I want to ask again. Which selection mode are you trying to use?

https://primevue.org/datatable/#multiple_rows_selection
https://primevue.org/datatable/#checkbox_row_selection

[alexandrapopa96]

I want to ask again. Which selection mode are you trying to use?

https://primevue.org/datatable/#multiple_rows_selection https://primevue.org/datatable/#checkbox_row_selection

@tugcekucukoglu The second one: https://primevue.org/datatable/#checkbox_row_selection
This issue was introduced again (version "primevue": "^3.29.2") #3605

[BoThomas]

I agree - this is the same issue #3605 which again is a reference to issue #2259.

The error is especially noticeable when using both selection modes together (like in the codesandbox below).

The problem was present in 3.23.0 and fixed in 3.24.0.
After that reintroduced in 3.29.2

With codesandbox https://codesandbox.io/s/epic-scott-cxx2h5?file=/src/App.vue this can be tested by choosing different primevue versions.

[jf908]

I'm also experiencing this issue so I am using this workaround for the time being:

<Column
  selectionMode="multiple"
  :pt="{
    checkboxWrapper: {
      onClick(e) {
        e.stopPropagation();
      },
    },
  }"
/>

Hopefully it gets fixed!

[NetFlareSuperAdmin]

Any update on this? Having the same issue.

[farhan27555]

In case someone comes across this issue, I did this as a quick workaround. It's not pretty but it works.

handleRowClick(event) {
  const targetEl = event.target;
  const parentEl = targetEl.parentElement;
  if (targetEl.classList.contains("p-checkbox-icon") || parentEl?.classList?.contains("p-checkbox-icon")) return;

[notflip]

Why is this closed? Issue remains, with the following code, when clicking a checkbox, the rowSelect is called. Idealy the row select is called when clicking the row itself, any of the cells, but not the checkbox.

  <DataTable
    v-model:selection="selectedUser"
    :loading="loading"
    :value="users"
    dataKey="id"
    selectionMode="single"
    @rowSelect="onRowSelect"
  >