Merge pull request #6544 from KumJungMin/fix/issue-6472_

fix(DataTable): prevent rowClick trigger when button clicked
primefaces · Oct 16, 2024 · ecf9b65 · ecf9b65
2 parents 293a01b + 2e72c8b
commit ecf9b65
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/packages/primevue/src/datatable/DataTable.spec.js b/packages/primevue/src/datatable/DataTable.spec.js
@@ -582,6 +582,49 @@ describe('DataTable.vue', () => {
         expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
     });
 
+    it('should not select row when inner button is clicked', async () => {
+        wrapper = mount(DataTable, {
+            global: {
+                plugins: [PrimeVue],
+                components: {
+                    Column,
+                    Button
+                }
+            },
+            props: {
+                value: smallData,
+                expandedRows: [],
+                paginatorTemplate: 'CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+                rowsPerPageOptions: [5, 6, 7],
+                currentPageReportTemplate: 'Showing {first} to {last} of {totalRecords}'
+            },
+            slots: {
+                default: `
+                <Column :expander="true" />
+                <Column field="code" header="Code" sortable>
+                    <template #body="slotProps">
+                        <button @click="buttonClicked">button</button>
+                    </template>
+                </Column>
+                <Column field="name" header="Name" sortable></Column>
+            `
+            },
+            methods: {
+                buttonClicked() {
+                    console.log('button clicked');
+                }
+            }
+        });
+
+        const button = wrapper.find('button');
+
+        expect(button.exists()).toBe(true);
+
+        await button.trigger('click');
+
+        expect(wrapper.emitted()['row-click']).toBeUndefined();
+    });
+
     it('should select all rows', async () => {
         wrapper = mount(DataTable, {
             global: {

diff --git a/packages/primevue/src/datatable/DataTable.vue b/packages/primevue/src/datatable/DataTable.vue
@@ -734,7 +734,7 @@ export default {
             const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
             const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
 
-            if (isClickable(event.currentTarget)) {
+            if (isClickable(event.target)) {
                 return;
             }
 
@@ -811,7 +811,7 @@ export default {
             this.rowTouched = false;
 
             if (focusedItem) {
-                if (event.currentTarget?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
+                if (event.target?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
 
                 const targetRow = event.currentTarget?.closest('tr[data-p-selectable-row="true"]');