Browse Source

Merge pull request #4033 from nocodb/fix/avoid-scroll-to-cell-on-click

Fix: Grid view - avoid scroll to cell on click
pull/4045/head
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
commit
45653eac6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 30
      packages/nc-gui/components/smartsheet/Grid.vue
  2. 22
      packages/nc-gui/composables/useMultiSelect/index.ts

30
packages/nc-gui/components/smartsheet/Grid.vue

@ -83,6 +83,7 @@ const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
const expandedFormDlg = ref(false) const expandedFormDlg = ref(false)
const expandedFormRow = ref<Row>() const expandedFormRow = ref<Row>()
const expandedFormRowState = ref<Record<string, any>>() const expandedFormRowState = ref<Record<string, any>>()
const tbodyEl = ref<HTMLElement>()
const { const {
isLoading, isLoading,
@ -107,6 +108,19 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
isPkAvail, isPkAvail,
clearCell, clearCell,
makeEditable, makeEditable,
() => {
if (selected.row !== null && selected.col !== null) {
// get active cell
const td = tbodyEl.value?.querySelectorAll('tr')[selected.row]?.querySelectorAll('td')[selected.col + 1]
if (!td) return
// scroll into the active cell
td.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'nearest',
})
}
},
) )
onMounted(loadGridViewColumns) onMounted(loadGridViewColumns)
@ -351,22 +365,6 @@ watch(
}, },
{ immediate: true }, { immediate: true },
) )
const tbodyEl = ref<HTMLElement>()
watch([() => selected.row, () => selected.col], ([row, col]) => {
if (row !== null && col !== null) {
// get active cell
const td = tbodyEl.value?.querySelectorAll('tr')[row]?.querySelectorAll('td')[col + 1]
if (!td) return
// scroll into the active cell
td.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'end',
})
}
})
</script> </script>
<template> <template>

22
packages/nc-gui/composables/useMultiSelect/index.ts

@ -17,6 +17,7 @@ export function useMultiSelect(
isPkAvail: MaybeRef<boolean>, isPkAvail: MaybeRef<boolean>,
clearCell: Function, clearCell: Function,
makeEditable: Function, makeEditable: Function,
scrollToActiveCell?: () => void,
) { ) {
const { t } = useI18n() const { t } = useI18n()
@ -159,6 +160,7 @@ export function useMultiSelect(
selected.col = 0 selected.col = 0
} }
} }
scrollToActiveCell?.()
break break
/** on enter key press make cell editable */ /** on enter key press make cell editable */
case 'Enter': case 'Enter':
@ -178,25 +180,37 @@ export function useMultiSelect(
case 'ArrowRight': case 'ArrowRight':
e.preventDefault() e.preventDefault()
clearRangeRows() clearRangeRows()
if (selected.col < unref(columnLength) - 1) selected.col++ if (selected.col < unref(columnLength) - 1) {
selected.col++
scrollToActiveCell?.()
}
break break
case 'ArrowLeft': case 'ArrowLeft':
clearRangeRows() clearRangeRows()
e.preventDefault() e.preventDefault()
clearRangeRows() clearRangeRows()
if (selected.col > 0) selected.col-- if (selected.col > 0) {
selected.col--
scrollToActiveCell?.()
}
break break
case 'ArrowUp': case 'ArrowUp':
clearRangeRows() clearRangeRows()
e.preventDefault() e.preventDefault()
clearRangeRows() clearRangeRows()
if (selected.row > 0) selected.row-- if (selected.row > 0) {
selected.row--
scrollToActiveCell?.()
}
break break
case 'ArrowDown': case 'ArrowDown':
clearRangeRows() clearRangeRows()
e.preventDefault() e.preventDefault()
clearRangeRows() clearRangeRows()
if (selected.row < unref(data).length - 1) selected.row++ if (selected.row < unref(data).length - 1) {
selected.row++
scrollToActiveCell?.()
}
break break
default: default:
{ {

Loading…
Cancel
Save