diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue index 7b2c7808d3..0ba1cd4b6d 100644 --- a/packages/nc-gui/components/smartsheet/Grid.vue +++ b/packages/nc-gui/components/smartsheet/Grid.vue @@ -172,6 +172,13 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange makeEditable, scrollToCell, (e: KeyboardEvent) => { + // ignore navigating if picker(Date, Time, DateTime, Year) + // or single/multi select options is open + const activePickerOrDropdownEl = document.querySelector( + '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active', + ) + if (activePickerOrDropdownEl) return true + const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey if (e.key === 'Space') { if (selected.row !== null && !editEnabled) { @@ -373,10 +380,15 @@ onClickOutside(smartTable, (e) => { // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year) // or single/multi select options - const activePickerEl = document.querySelector( + const activePickerOrDropdownEl = document.querySelector( '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active', ) - if (e.target && activePickerEl && (activePickerEl === e.target || activePickerEl?.contains(e.target as Element))) return + if ( + e.target && + activePickerOrDropdownEl && + (activePickerOrDropdownEl === e.target || activePickerOrDropdownEl?.contains(e.target as Element)) + ) + return selected.row = null selected.col = null diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue index 5b028864c4..7ab1835468 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue @@ -106,6 +106,10 @@ watch(expandedFormDlg, (nexVal) => { useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => { switch (e.key) { + case 'ArrowLeft': + case 'ArrowRight': + e.stopPropagation() + break case 'ArrowUp': selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1) e.stopPropagation() @@ -114,19 +118,18 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => { selectedRowIndex.value = Math.min(childrenExcludedList.value?.list?.length - 1, selectedRowIndex.value + 1) e.stopPropagation() break - case 'Enter': - { - const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value] - if (selectedRow) { - linkRow(selectedRow) - e.stopPropagation() - } + case 'Enter': { + const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value] + if (selectedRow) { + linkRow(selectedRow) + e.stopPropagation() } + } break } }) -const activeRow = (el?: InstanceType) => { - el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' }) +const activeRow = (vNode?: InstanceType) => { + vNode?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' }) } diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts index b9565b68e5..e8e696b96a 100644 --- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts +++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts @@ -6,15 +6,15 @@ export function useSelectedCellKeyupListener(selected: Ref, handler: (e watch(selected, (nextVal, _, cleanup) => { // bind listener when `selected` is truthy if (nextVal) { - document.addEventListener('keyup', handler) + document.addEventListener('keydown', handler, true) // if `selected` is falsy then remove the event handler } else { - document.removeEventListener('keyup', handler) + document.removeEventListener('keydown', handler, true) } // cleanup is called whenever the watcher is re-evaluated or stopped cleanup(() => { - document.removeEventListener('keyup', handler) + document.removeEventListener('keydown', handler, true) }) }) }