From 288cfa8b75ec3856fbf5cb5ac779d61ca831c014 Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Tue, 8 Oct 2024 11:06:55 +0530 Subject: [PATCH] fix(nc-gui): Prevent keyboard shortcuts if user is in cell edit mode or any other active input element (#9600) * fix(nc-gui): stop event propogation is active element is input * fix(nc-gui): disable expanded form keyboard shortcuts navigation if it is first row or last row * fix(nc-gui): oss test fail issue --- packages/nc-gui/components/cell/Currency.vue | 1 + packages/nc-gui/components/cell/Decimal.vue | 1 + packages/nc-gui/components/cell/Duration.vue | 1 + packages/nc-gui/components/cell/Email.vue | 1 + packages/nc-gui/components/cell/Float.vue | 1 + packages/nc-gui/components/cell/Integer.vue | 1 + packages/nc-gui/components/cell/Json.vue | 1 + packages/nc-gui/components/cell/Percent.vue | 1 + packages/nc-gui/components/cell/PhoneNumber.vue | 1 + packages/nc-gui/components/cell/RichText.vue | 1 + packages/nc-gui/components/cell/Text.vue | 1 + packages/nc-gui/components/cell/TextArea.vue | 2 ++ packages/nc-gui/components/cell/Url.vue | 1 + .../nc-gui/components/dashboard/TreeView/index.vue | 5 +++++ packages/nc-gui/components/general/FullScreen.vue | 2 +- .../components/smartsheet/details/Fields.vue | 14 ++------------ .../components/smartsheet/expanded-form/index.vue | 4 ++++ packages/nc-gui/store/projectsShortcuts.ts | 4 ++-- packages/nc-gui/utils/browserUtils.ts | 9 ++++++++- 19 files changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue index cfd2f0bbea..615e8e9ffb 100644 --- a/packages/nc-gui/components/cell/Currency.vue +++ b/packages/nc-gui/components/cell/Currency.vue @@ -117,6 +117,7 @@ onMounted(() => { @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop @contextmenu.stop diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue index 3dd6cd6e72..3ad720541d 100644 --- a/packages/nc-gui/components/cell/Decimal.vue +++ b/packages/nc-gui/components/cell/Decimal.vue @@ -113,6 +113,7 @@ watch(isExpandedFormOpen, () => { @keydown.right.stop @keydown.up.stop="onKeyDown" @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue index 3439a6b414..c4875a39aa 100644 --- a/packages/nc-gui/components/cell/Duration.vue +++ b/packages/nc-gui/components/cell/Duration.vue @@ -90,6 +90,7 @@ const focus: VNodeRef = (el) => @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue index 6af36304fa..b859699fb8 100644 --- a/packages/nc-gui/components/cell/Email.vue +++ b/packages/nc-gui/components/cell/Email.vue @@ -87,6 +87,7 @@ watch( @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop @paste.prevent="onPaste" diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue index f8008eebf3..d8507f05f7 100644 --- a/packages/nc-gui/components/cell/Float.vue +++ b/packages/nc-gui/components/cell/Float.vue @@ -59,6 +59,7 @@ const focus: VNodeRef = (el) => @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue index 5f84ab02b3..a4232fa128 100644 --- a/packages/nc-gui/components/cell/Integer.vue +++ b/packages/nc-gui/components/cell/Integer.vue @@ -107,6 +107,7 @@ function onKeyDown(e: any) { @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue index b828243543..277d656e4b 100644 --- a/packages/nc-gui/components/cell/Json.vue +++ b/packages/nc-gui/components/cell/Json.vue @@ -214,6 +214,7 @@ watch(inputWrapperRef, () => { :auto-focus="!isForm && !isEditColumn" @update:model-value="localValue = $event" @keydown.enter.stop + @keydown.alt.stop /> diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue index 76dabe449f..797211a09e 100644 --- a/packages/nc-gui/components/cell/Percent.vue +++ b/packages/nc-gui/components/cell/Percent.vue @@ -154,6 +154,7 @@ const onTabPress = (e: KeyboardEvent) => { @keydown.up.stop @keydown.delete.stop @keydown.tab="onTabPress" + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue index b249487190..83c2c7a5ca 100644 --- a/packages/nc-gui/components/cell/PhoneNumber.vue +++ b/packages/nc-gui/components/cell/PhoneNumber.vue @@ -71,6 +71,7 @@ watch( @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/RichText.vue b/packages/nc-gui/components/cell/RichText.vue index 27ec64ad08..de50543f0d 100644 --- a/packages/nc-gui/components/cell/RichText.vue +++ b/packages/nc-gui/components/cell/RichText.vue @@ -335,6 +335,7 @@ onClickOutside(editorDom, (e) => { [`!overflow-hidden nc-truncate nc-line-clamp-${rowHeightTruncateLines(localRowHeight)}`]: !fullMode && readOnly && localRowHeight && !isExpandedFormOpen && !isForm, }" + @keydown.alt.stop @keydown.alt.enter.stop @keydown.shift.enter.stop /> diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue index 235b25689a..3d8bfbf5c1 100644 --- a/packages/nc-gui/components/cell/Text.vue +++ b/packages/nc-gui/components/cell/Text.vue @@ -41,6 +41,7 @@ const focus: VNodeRef = (el) => @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue index ed45452691..a856b3aaa9 100644 --- a/packages/nc-gui/components/cell/TextArea.vue +++ b/packages/nc-gui/components/cell/TextArea.vue @@ -259,6 +259,7 @@ watch(inputWrapperRef, () => { }" :disabled="readOnly" @blur="editEnabled = false" + @keydown.alt.stop @keydown.alt.enter.stop @keydown.shift.enter.stop @keydown.down.stop @@ -359,6 +360,7 @@ watch(inputWrapperRef, () => { :style="{ resize: 'both' }" :disabled="readOnly" @keydown.escape="isVisible = false" + @keydown.alt.stop /> diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue index 11a31d96cd..e860ed5a3d 100644 --- a/packages/nc-gui/components/cell/Url.vue +++ b/packages/nc-gui/components/cell/Url.vue @@ -92,6 +92,7 @@ watch( @keydown.right.stop @keydown.up.stop @keydown.delete.stop + @keydown.alt.stop @selectstart.capture.stop @mousedown.stop /> diff --git a/packages/nc-gui/components/dashboard/TreeView/index.vue b/packages/nc-gui/components/dashboard/TreeView/index.vue index fc22eeb885..75c16ef46b 100644 --- a/packages/nc-gui/components/dashboard/TreeView/index.vue +++ b/packages/nc-gui/components/dashboard/TreeView/index.vue @@ -151,6 +151,11 @@ const isCreateTableAllowed = computed( useEventListener(document, 'keydown', async (e: KeyboardEvent) => { const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey + + if (isActiveInputElementExist()) { + return + } + if (e.altKey && !e.shiftKey && !cmdOrCtrl) { switch (e.keyCode) { case 84: { diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue index e0d550763f..8c10b968a7 100644 --- a/packages/nc-gui/components/general/FullScreen.vue +++ b/packages/nc-gui/components/general/FullScreen.vue @@ -19,7 +19,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => { switch (e.keyCode) { case 70: { // ALT + F - if (!isDrawerOrModalExist()) { + if (!isDrawerOrModalExist() && !isActiveInputElementExist()) { $e('c:shortcut', { key: 'ALT + F' }) isSidebarsOpen.value = !isSidebarsOpen.value } diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue index 9ed51b01c8..46e5938793 100644 --- a/packages/nc-gui/components/smartsheet/details/Fields.vue +++ b/packages/nc-gui/components/smartsheet/details/Fields.vue @@ -895,12 +895,7 @@ onKeyDown('ArrowUp', () => { onKeyDown('Delete', () => { if (isLocked.value) return - if ( - document.activeElement?.tagName === 'INPUT' || - document.activeElement?.tagName === 'TEXTAREA' || - // A rich text editor is a div with the contenteditable attribute set to true. - document.activeElement?.getAttribute('contenteditable') - ) { + if (isActiveInputElementExist()) { return } @@ -913,12 +908,7 @@ onKeyDown('Delete', () => { onKeyDown('Backspace', () => { if (isLocked.value) return - if ( - document.activeElement?.tagName === 'INPUT' || - document.activeElement?.tagName === 'TEXTAREA' || - // A rich text editor is a div with the contenteditable attribute set to true. - document.activeElement?.getAttribute('contenteditable') - ) { + if (isActiveInputElementExist()) { return } diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue index 5c474f2d48..06076a01ba 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue @@ -404,9 +404,13 @@ useActiveKeyupListener( if (!e.altKey) return if (e.key === 'ArrowLeft') { e.stopPropagation() + if (isFirstRow.value) return + loadingEmit('prev') } else if (e.key === 'ArrowRight') { e.stopPropagation() + if (islastRow.value) return + onNext() } // on alt + s save record diff --git a/packages/nc-gui/store/projectsShortcuts.ts b/packages/nc-gui/store/projectsShortcuts.ts index 14035f4faa..1acda2bfd6 100644 --- a/packages/nc-gui/store/projectsShortcuts.ts +++ b/packages/nc-gui/store/projectsShortcuts.ts @@ -24,7 +24,7 @@ export const useProjectsShortcuts = defineStore('projectsShortcutsStore', () => switch (e.keyCode) { case 70: { // ALT + F - if (!isDrawerOrModalExist()) { + if (!isDrawerOrModalExist() && !isActiveInputElementExist()) { $e('c:shortcut', { key: 'ALT + F' }) const sidebarStore = useSidebarStore() @@ -37,7 +37,7 @@ export const useProjectsShortcuts = defineStore('projectsShortcutsStore', () => } // 'ALT + ,' case 188: { - if (isUIAllowed('settingsPage') && !isDrawerOrModalExist()) { + if (isUIAllowed('settingsPage') && !isDrawerOrModalExist() && !isActiveInputElementExist()) { $e('c:shortcut', { key: 'ALT + ,' }) const basesStore = useBases() diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts index 750a8ca830..718d35aa09 100644 --- a/packages/nc-gui/utils/browserUtils.ts +++ b/packages/nc-gui/utils/browserUtils.ts @@ -5,7 +5,14 @@ export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.act export const isExpandedFormOpenExist = () => document.querySelector('.nc-drawer-expanded-form.active') export const isExpandedCellInputExist = () => document.querySelector('.expanded-cell-input') export const cmdKActive = () => document.querySelector('.cmdk-modal-active') - +export const isActiveInputElementExist = () => { + return ( + document.activeElement?.tagName === 'INPUT' || + document.activeElement?.tagName === 'TEXTAREA' || + // A rich text editor is a div with the contenteditable attribute set to true. + !!document.activeElement?.getAttribute('contenteditable') + ) +} export const getScrollbarWidth = () => { const outer = document.createElement('div') outer.style.visibility = 'hidden'