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 d7896d3caa..70ac767087 100644 --- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts +++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts @@ -4,10 +4,17 @@ 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() || isExpandedFormOpenExist() || isExpandedCellInputExist() || isFieldEditOrAddDropdownOpen()) return + if (cmdKActive()) return + + /** + * If `useSelectedCellKeyupListener` used for grid cell and active element is not in grid then prevent + */ + if (isGridCell && (isExpandedFormOpenExist() || isExpandedCellInputExist() || isFieldEditOrAddDropdownOpen())) { + return + } // TODO: Check if their is any active element which is outside grid then return handler(e) }