primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.05k stars 1.2k forks source link

DataTable - button click in a cell propagates to row-click #6472

Open juliepetrova opened 1 week ago

juliepetrova commented 1 week ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch primevue@4.0.7 for the project I'm working on.

Clicking on a button inside a row in PrimeVue's DataTable still triggers the row's onRowClick event, which causes unwanted navigation. The patch prevents this by checking if the click target has the class 'p-button' and halting further execution if it does (it is a workaround and not an actual solution of course). In this example the button is used to open a ConfirmPopup element which, when stopPropagation is applied, is misplaced. (https://github.com/primefaces/primevue/issues/5929)

Here is the diff that solved my problem:

diff --git a/node_modules/primevue/datatable/index.mjs b/node_modules/primevue/datatable/index.mjs
index 47a9440..6bfe420 100644
--- a/node_modules/primevue/datatable/index.mjs
+++ b/node_modules/primevue/datatable/index.mjs
@@ -1467,6 +1467,9 @@ var script$8 = {
       });
     },
     onRowClick: function onRowClick(event) {
+      if(event.target.className.includes('p-button')) {
+        return;
+      };
       this.$emit('row-click', {
         originalEvent: event,
         data: this.rowData,

This issue body was partially generated by patch-package.

sid-6581 commented 1 week ago

The same thing happens for regular anchors, and probably anything else clickable. It seems #6333 is likely responsible for the regression.

colinatwork commented 1 week ago

We are also seeing this