Merge pull request #6333 from KumJungMin/fix/issue-6323

fix: handle click event using event.currentTarget in DataTable
pull/6378/head
Tuğçe Küçükoğlu 2024-09-10 14:26:02 +03:00 committed by GitHub
commit 08340e2691
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 27 deletions

View File

@ -458,7 +458,7 @@ describe('DataTable.vue', () => {
await wrapper.setProps({ selection: null, selectionMode: 'single' }); await wrapper.setProps({ selection: null, selectionMode: 'single' });
await wrapper.vm.onRowClick({ await wrapper.vm.onRowClick({
originalEvent: { target: wrapper.findAll('tr.p-datatable-selectable-row')[0].element }, originalEvent: { currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[0].element },
data: smallData[0], data: smallData[0],
index: 0 index: 0
}); });
@ -472,13 +472,13 @@ describe('DataTable.vue', () => {
await wrapper.setProps({ selection: null, selectionMode: 'multiple' }); await wrapper.setProps({ selection: null, selectionMode: 'multiple' });
await wrapper.vm.onRowClick({ await wrapper.vm.onRowClick({
originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-datatable-selectable-row')[0].element }, originalEvent: { shiftKey: true, currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[0].element },
data: smallData[0], data: smallData[0],
index: 0 index: 0
}); });
await wrapper.vm.onRowClick({ await wrapper.vm.onRowClick({
originalEvent: { shiftKey: true, target: wrapper.findAll('tr.p-datatable-selectable-row')[1].element }, originalEvent: { shiftKey: true, currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[1].element },
data: smallData[1], data: smallData[1],
index: 1 index: 1
}); });
@ -492,13 +492,13 @@ describe('DataTable.vue', () => {
await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false }); await wrapper.setProps({ selection: null, selectionMode: 'multiple', metaKeySelection: false });
await wrapper.vm.onRowClick({ await wrapper.vm.onRowClick({
originalEvent: { target: wrapper.findAll('.p-datatable-selectable-row')[0].element }, originalEvent: { currentTarget: wrapper.findAll('.p-datatable-selectable-row')[0].element },
data: smallData[0], data: smallData[0],
index: 0 index: 0
}); });
await wrapper.vm.onRowClick({ await wrapper.vm.onRowClick({
originalEvent: { target: wrapper.findAll('tr.p-datatable-selectable-row')[1].element }, originalEvent: { currentTarget: wrapper.findAll('tr.p-datatable-selectable-row')[1].element },
data: smallData[1], data: smallData[1],
index: 1 index: 1
}); });

View File

@ -280,29 +280,29 @@
</template> </template>
<script> <script>
import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api';
import { HelperSet, UniqueComponentId, getVNodeProp } from '@primevue/core/utils';
import { import {
getAttribute,
clearSelection,
findSingle,
isClickable,
find,
focus,
exportCSV,
getOffset,
addStyle,
getIndex,
getOuterWidth,
getHiddenElementOuterWidth,
getHiddenElementOuterHeight,
getWindowScrollTop,
getOuterHeight,
removeClass,
addClass, addClass,
addStyle,
clearSelection,
exportCSV,
find,
findSingle,
focus,
getAttribute,
getHiddenElementOuterHeight,
getHiddenElementOuterWidth,
getIndex,
getOffset,
getOuterHeight,
getOuterWidth,
getWindowScrollTop,
isClickable,
removeClass,
setAttribute setAttribute
} from '@primeuix/utils/dom'; } from '@primeuix/utils/dom';
import { resolveFieldData, localeComparator, sort, findIndexInList, equals, reorderArray, isNotEmpty, isEmpty } from '@primeuix/utils/object'; import { equals, findIndexInList, isEmpty, isNotEmpty, localeComparator, reorderArray, resolveFieldData, sort } from '@primeuix/utils/object';
import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api';
import { HelperSet, UniqueComponentId, getVNodeProp } from '@primevue/core/utils';
import ArrowDownIcon from '@primevue/icons/arrowdown'; import ArrowDownIcon from '@primevue/icons/arrowdown';
import ArrowUpIcon from '@primevue/icons/arrowup'; import ArrowUpIcon from '@primevue/icons/arrowup';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
@ -736,7 +736,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.target)) { if (isClickable(event.currentTarget)) {
return; return;
} }
@ -813,9 +813,9 @@ export default {
this.rowTouched = false; this.rowTouched = false;
if (focusedItem) { if (focusedItem) {
if (event.target?.getAttribute('data-pc-section') === 'rowtoggleicon' || event.target?.parentElement?.getAttribute('data-pc-section') === 'rowtoggleicon') return; if (event.currentTarget?.getAttribute('data-pc-section') === 'rowtoggleicon') return;
const targetRow = event.target?.closest('tr[data-p-selectable-row="true"]'); const targetRow = event.currentTarget?.closest('tr[data-p-selectable-row="true"]');
focusedItem.tabIndex = '-1'; focusedItem.tabIndex = '-1';
targetRow.tabIndex = '0'; targetRow.tabIndex = '0';