Merge pull request #9983 from nocodb/nc-fix/active-cell-keyup-listner-issue

Nc fix: if cell is active and document.activeElement is different then prevent selectedCellKeyupListner event

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)
 

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

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -502,7 +502,7 @@ useActiveKeyupListener(
       }
     }
   },
-  { immediate: true },
+  { immediate: true, isGridCell: false },
 )
 
 const showDeleteRowModal = ref(false)

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -120,7 +120,7 @@ useActiveKeyupListener(
       close()
     }
   },
-  { immediate: true },
+  { immediate: true, isGridCell: false },
 )
 
 watch(

packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

@@ -4,10 +4,27 @@ import type { ComputedRef, Ref } from 'vue'
 function useSelectedCellKeyupListener(
   selected: Ref<boolean | undefined> | ComputedRef<boolean | undefined>,
   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)
   }
 

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'