diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue index 1060125573..19a8d5cde1 100644 --- a/packages/nc-gui/components/cell/MultiSelect.vue +++ b/packages/nc-gui/components/cell/MultiSelect.vue @@ -235,9 +235,15 @@ useSelectedCellKeyupListener(activeCell, (e) => { }) // close dropdown list on escape -useSelectedCellKeyupListener(isOpen, (e) => { - if (e.key === 'Escape') isOpen.value = false -}) +useSelectedCellKeyupListener( + isOpen, + (e) => { + if (e.key === 'Escape') isOpen.value = false + }, + { + isGridCell: false, + }, +) const activeOptCreateInProgress = ref(0) diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue index f748b1931c..966557ce8f 100644 --- a/packages/nc-gui/components/cell/User.vue +++ b/packages/nc-gui/components/cell/User.vue @@ -247,9 +247,15 @@ useSelectedCellKeyupListener(activeCell, (e) => { }) // close dropdown list on escape -useSelectedCellKeyupListener(isOpen, (e) => { - if (e.key === 'Escape') isOpen.value = false -}) +useSelectedCellKeyupListener( + isOpen, + (e) => { + if (e.key === 'Escape') isOpen.value = false + }, + { + isGridCell: false, + }, +) const search = () => { searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue index f92d9fb778..5637d05861 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue @@ -502,7 +502,7 @@ useActiveKeyupListener( } } }, - { immediate: true }, + { immediate: true, isGridCell: false }, ) const showDeleteRowModal = ref(false) diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue index ce5a7d2995..55acb165df 100644 --- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue +++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue @@ -120,7 +120,7 @@ useActiveKeyupListener( close() } }, - { immediate: true }, + { immediate: true, isGridCell: false }, ) watch( diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts index 1b64dbd614..ac1d91db02 100644 --- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts +++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts @@ -4,10 +4,27 @@ import type { ComputedRef, Ref } from 'vue' function useSelectedCellKeyupListener( selected: Ref | ComputedRef, handler: (e: KeyboardEvent) => void, - { immediate = false }: { immediate?: boolean } = {}, + { immediate = false, isGridCell = true }: { immediate?: boolean; isGridCell?: boolean } = {}, ) { const finalHandler = (e: KeyboardEvent) => { if (cmdKActive()) return + + /** + * If `useSelectedCellKeyupListener` used for grid cell and active element is not in grid then prevent + */ + if (isGridCell) { + if (isExpandedFormOpenExist() || isExpandedCellInputExist() || isFieldEditOrAddDropdownOpen()) { + return + } + + if ( + isActiveInputElementExist() && + !(document.activeElement as HTMLElement).closest('table, .nc-group-table, .nc-grid-wrapper') + ) { + return + } + } + handler(e) } diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts index e79cb7319c..ec56c84f03 100644 --- a/packages/nc-gui/utils/browserUtils.ts +++ b/packages/nc-gui/utils/browserUtils.ts @@ -14,6 +14,7 @@ export const isActiveInputElementExist = () => { !!document.activeElement?.getAttribute('contenteditable') ) } +export const isFieldEditOrAddDropdownOpen = () => document.querySelector('.nc-dropdown-edit-column.active') export const getScrollbarWidth = () => { const outer = document.createElement('div') outer.style.visibility = 'hidden'