feat(nc-gui): add isDrawerOrModalExist

packages/nc-gui/components/dashboard/TreeView.vue

@@ -6,7 +6,9 @@ import GithubButton from 'vue-github-button'
 import type { VNodeRef } from '#imports'
 import {
   Empty,
+  TabType,
   computed,
+  isDrawerOrModalExist,
   isMac,
   reactive,
   ref,
@@ -20,7 +22,6 @@ import {
   useUIPermission,
   watchEffect,
 } from '#imports'
-import { TabType } from '~/lib'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 
@@ -224,7 +225,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 84: {
         // ALT + T
-        if (isUIAllowed('table-create')) {
+        if (isUIAllowed('table-create') && !isDrawerOrModalExist()) {
           // prevent the key `T` is inputted to table title input
           e.preventDefault()
           openTableCreateDialog()

packages/nc-gui/components/general/FullScreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, isMac, useSidebar } from '#imports'
+import { computed, isDrawerOrModalExist, isMac, useSidebar } from '#imports'
 
 const rightSidebar = useSidebar('nc-right-sidebar')
 
@@ -19,7 +19,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 70: {
         // ALT + F
-        isSidebarsOpen.value = !isSidebarsOpen.value
+        if (!isDrawerOrModalExist()) {
+          isSidebarsOpen.value = !isSidebarsOpen.value
+        }
         break
       }
     }

packages/nc-gui/components/general/ShareBaseButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isMac, useRoute, useUIPermission } from '#imports'
+import { isDrawerOrModalExist, isMac, useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
@@ -22,7 +22,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 73: {
         // ALT + I
-        if (isShareBaseAllowed.value) {
+        if (isShareBaseAllowed.value && !isDrawerOrModalExist()) {
           showUserModal.value = true
         }
         break

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

@@ -11,6 +11,7 @@ import {
   IsGridInj,
   IsLockedInj,
   MetaInj,
+  NavigateDir,
   OpenNewRecordFormHookInj,
   PaginationDataInj,
   ReadonlyInj,
@@ -22,6 +23,7 @@ import {
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
+  isDrawerOrModalExist,
   isMac,
   message,
   onBeforeUnmount,
@@ -42,7 +44,6 @@ import {
   watch,
 } from '#imports'
 import type { Row } from '~/lib'
-import { NavigateDir } from '~/lib'
 
 const { t } = useI18n()
 
@@ -178,8 +179,8 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
       return true
     }
 
-    // if expanded form is active skip keyboard event handling
-    if (document.querySelector('.nc-drawer-expanded-form.active')) {
+    // skip keyboard event handling if there is a drawer / modal
+    if (isDrawerOrModalExist()) {
       return true
     }
 

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
 import {
+  TabType,
   computed,
   definePageMeta,
+  extractSdkResponseErrorMsg,
+  isDrawerOrModalExist,
   isMac,
   message,
   navigateTo,
@@ -26,8 +29,6 @@ import {
   useTheme,
   useUIPermission,
 } from '#imports'
-import { TabType } from '~/lib'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 definePageMeta({
   hideHeader: true,
@@ -210,7 +211,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 188: {
         // ALT + ,
-        if (isUIAllowed('settings')) {
+        if (isUIAllowed('settings') && !isDrawerOrModalExist()) {
           e.preventDefault()
           toggleDialog(true, 'teamAndAuth')
         }
@@ -221,7 +222,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   if (cmdOrCtrl) {
     switch (e.key) {
       case '/':
-        if (!document.querySelector('.nc-modal-keyboard-shortcuts.active')) {
+        if (!isDrawerOrModalExist()) {
           openKeyboardShortcutDialog()
         }
         break

packages/nc-gui/utils/browserUtils.ts

@@ -1,2 +1,3 @@
 // refer - https://stackoverflow.com/a/11752084
 export const isMac = () => /Mac/i.test(navigator.platform)
+export const isDrawerOrModalExist = () => document.querySelector('.ant-modal, .ant-drawer')