Merge pull request #6544 from KumJungMin/fix/issue-6472_
fix(DataTable): prevent rowClick trigger when button clickedpull/6596/head
commit
ecf9b653f6
|
@ -582,6 +582,49 @@ describe('DataTable.vue', () => {
|
||||||
expect(wrapper.emitted()['row-select'][1][0].index).toBe(1);
|
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 () => {
|
it('should select all rows', async () => {
|
||||||
wrapper = mount(DataTable, {
|
wrapper = mount(DataTable, {
|
||||||
global: {
|
global: {
|
||||||
|
|
|
@ -734,7 +734,7 @@ export default {
|
||||||
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
|
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
|
||||||
const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
|
const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
|
||||||
|
|
||||||
if (isClickable(event.currentTarget)) {
|
if (isClickable(event.target)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -811,7 +811,7 @@ export default {
|
||||||
this.rowTouched = false;
|
this.rowTouched = false;
|
||||||
|
|
||||||
if (focusedItem) {
|
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"]');
|
const targetRow = event.currentTarget?.closest('tr[data-p-selectable-row="true"]');
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue