From 3d321827178e291f3965cd0b16394fa5d718b0f6 Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Tue, 10 Dec 2024 06:14:45 +0000 Subject: [PATCH 1/3] fix(nc-gui): if cell is active and document.activeElement is different then prevent selectedCellKeyupListner event --- .../nc-gui/composables/useSelectedCellKeyupListener/index.ts | 3 ++- packages/nc-gui/utils/browserUtils.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts index 1b64dbd614..d7896d3caa 100644 --- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts +++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts @@ -7,7 +7,8 @@ function useSelectedCellKeyupListener( { immediate = false }: { immediate?: boolean } = {}, ) { const finalHandler = (e: KeyboardEvent) => { - if (cmdKActive()) return + if (cmdKActive() || isExpandedFormOpenExist() || isExpandedCellInputExist() || isFieldEditOrAddDropdownOpen()) return + // TODO: Check if their is any active element which is outside grid then 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' From c41447a4ac459b30eb90118a358a7752d143b5dc Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Tue, 10 Dec 2024 06:14:45 +0000 Subject: [PATCH 2/3] fix(nc-gui): if useSElectedCellKeyupListner is not grid cell activeCell then dont prevent handler fn call --- packages/nc-gui/components/cell/MultiSelect.vue | 12 +++++++++--- packages/nc-gui/components/cell/User.vue | 12 +++++++++--- .../components/smartsheet/expanded-form/index.vue | 2 +- .../tabs/auth/user-management/UsersModal.vue | 2 +- .../useSelectedCellKeyupListener/index.ts | 11 +++++++++-- 5 files changed, 29 insertions(+), 10 deletions(-) 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) } From 70f22c6943cb963c38772b1438e517165ae7ccff Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Tue, 10 Dec 2024 06:14:45 +0000 Subject: [PATCH 3/3] fix(nc-gui): if cell is active and document active element is outside grid then prevent event listner --- .../useSelectedCellKeyupListener/index.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts index 70ac767087..ac1d91db02 100644 --- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts +++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts @@ -12,10 +12,19 @@ function useSelectedCellKeyupListener( /** * If `useSelectedCellKeyupListener` used for grid cell and active element is not in grid then prevent */ - if (isGridCell && (isExpandedFormOpenExist() || isExpandedCellInputExist() || isFieldEditOrAddDropdownOpen())) { - return + if (isGridCell) { + if (isExpandedFormOpenExist() || isExpandedCellInputExist() || isFieldEditOrAddDropdownOpen()) { + return + } + + if ( + isActiveInputElementExist() && + !(document.activeElement as HTMLElement).closest('table, .nc-group-table, .nc-grid-wrapper') + ) { + return + } } - // TODO: Check if their is any active element which is outside grid then return + handler(e) }