Merge pull request #6333 from KumJungMin/fix/issue-6323
fix: handle click event using event.currentTarget in DataTablepull/6378/head
commit
08340e2691
|
@ -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
|
||||||
});
|
});
|
||||||
|
|
|
@ -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';
|
||||||
|
|
Loading…
Reference in New Issue