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

@@ -117,6 +117,7 @@ onMounted(() => {
     @keydown.right.stop
     @keydown.up.stop
     @keydown.delete.stop
+    @keydown.alt.stop
     @selectstart.capture.stop
     @mousedown.stop
     @contextmenu.stop

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
   />

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
     />

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"

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
   />

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
   />

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
       />
 
       <span v-if="error" class="nc-cell-field text-xs w-full py-1 text-red-500">

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
     />

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
   />

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
       />

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
   />

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
           />
         </div>
 

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
     />

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: {

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
         }

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -895,12 +895,7 @@ onKeyDown('ArrowUp', () => {
 onKeyDown('Delete', () => {
   if (isLocked.value) return
 
-  if (
+  if (isActiveInputElementExist()) {
-    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')
-  ) {
     return
   }
 
@@ -913,12 +908,7 @@ onKeyDown('Delete', () => {
 onKeyDown('Backspace', () => {
   if (isLocked.value) return
 
-  if (
+  if (isActiveInputElementExist()) {
-    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')
-  ) {
     return
   }
 

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

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()
 

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'