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

fix(DataTable): prevent rowClick trigger when button clicked
pull/6596/head
Tuğçe Küçükoğlu 2024-10-16 11:02:20 +03:00 committed by GitHub
commit ecf9b653f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 2 deletions

View File

@ -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: {

View File

@ -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"]');