Merge pull request #4917 from nocodb/fix/4916-filter-value-key-events-issue

Fix: Grid view - keydown event handler issues

packages/nc-gui/components/account/License.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import { useNuxtApp } from '#app'
 import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, useApi } from '#imports'
+import { extractSdkResponseErrorMsg, useApi,useGlobal } from '#imports'
 
 const { api, isLoading } = useApi()
 
-const {$e} = useNuxtApp()
+const { $e } = useNuxtApp()
+
+const { loadAppInfo } = useGlobal()
 
 let key = $ref('')
 
@@ -22,6 +24,7 @@ const setLicense = async () => {
   try {
     await api.orgLicense.set({ key: key })
     message.success('License key updated')
+    await loadAppInfo();
   } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }

packages/nc-gui/components/smartsheet/Grid.vue

@@ -173,8 +173,16 @@ const getContainerScrollForElement = (
   return scroll
 }
 
-const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCellClick, clearSelectedRange, copyValue } =
-  useMultiSelect(
+const {
+  isCellSelected,
+  activeCell,
+  handleMouseDown,
+  handleMouseOver,
+  handleCellClick,
+  clearSelectedRange,
+  copyValue,
+  isCellActive,
+} = useMultiSelect(
   meta,
   fields,
   data,
@@ -202,7 +210,7 @@ const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCell
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
     const altOrOptionKey = e.altKey
     if (e.key === ' ') {
-        if (activeCell.row != null && !editEnabled && hasEditPermission) {
+      if (isCellActive.value && !editEnabled && hasEditPermission) {
         e.preventDefault()
         clearSelectedRange()
         const row = data.value[activeCell.row]
@@ -226,6 +234,8 @@ const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCell
     }
 
     if (cmdOrCtrl) {
+      if (!isCellActive.value) return
+
       switch (e.key) {
         case 'ArrowUp':
           e.preventDefault()
@@ -294,7 +304,7 @@ const { isCellSelected, activeCell, handleMouseDown, handleMouseOver, handleCell
     // update/save cell value
     await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title)
   },
-  )
+)
 
 function scrollToCell(row?: number | null, col?: number | null) {
   row = row ?? activeCell.row
@@ -674,8 +684,7 @@ const closeAddColumnDropdown = () => {
           <thead ref="tableHead">
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th data-testid="grid-id-column">
-              <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center"
-                   data-testid="nc-check-all">
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" data-testid="nc-check-all">
                   <template v-if="!readOnly">
                     <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                     <div
@@ -897,8 +906,7 @@ const closeAddColumnDropdown = () => {
               </div>
             </a-menu-item>
 
-            <a-menu-item v-if="contextMenuTarget" data-testid="context-menu-item-copy"
-                         @click="copyValue(contextMenuTarget)">
+            <a-menu-item v-if="contextMenuTarget" data-testid="context-menu-item-copy" @click="copyValue(contextMenuTarget)">
               <div v-e="['a:row:copy']" class="nc-project-menu-item">
                 <!-- Copy -->
                 {{ $t('general.copy') }}

packages/nc-gui/composables/useGlobal/actions.ts

@@ -43,5 +43,14 @@ export function useGlobalActions(state: State): Actions {
       })
   }
 
-  return { signIn, signOut, refreshToken }
+  const loadAppInfo = async () => {
+    try {
+      const nuxtApp = useNuxtApp()
+      state.appInfo.value = await nuxtApp.$api.utils.appInfo()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return { signIn, signOut, refreshToken, loadAppInfo }
 }

packages/nc-gui/composables/useGlobal/types.ts

@@ -61,6 +61,7 @@ export interface Actions {
   signOut: () => void
   signIn: (token: string) => void
   refreshToken: () => void
+  loadAppInfo: () => void
 }
 
 export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State, 'token' | 'user'>

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

@@ -61,6 +61,10 @@ export function useMultiSelect(
 
   const columnLength = $computed(() => unref(fields)?.length)
 
+  const isCellActive = computed(
+    () => !(activeCell.row === null || activeCell.col === null || isNaN(activeCell.row) || isNaN(activeCell.col)),
+  )
+
   function makeActive(row: number, col: number) {
     if (activeCell.row === row && activeCell.col === col) {
       return
@@ -171,7 +175,7 @@ export function useMultiSelect(
       return true
     }
 
-    if (activeCell.row === null || activeCell.col === null) {
+    if (!isCellActive.value) {
       return
     }
 
@@ -367,6 +371,7 @@ export function useMultiSelect(
   useEventListener(document, 'mouseup', handleMouseUp)
 
   return {
+    isCellActive,
     handleMouseDown,
     handleMouseOver,
     clearSelectedRange,

packages/nc-gui/pages/account/index.vue

@@ -81,7 +81,7 @@ const openKeys = ref([/^\/account\/users/.test($route.fullPath) && 'users'])
             </a-menu-item>
             <a-menu-item
               v-if="isUIAllowed('license')"
-              key="apps"
+              key="license"
               class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
               @click="navigateTo('/account/license')"
             >