feat(nc-gui): skip keydown logic if drawer / modal is active

packages/nc-gui/components/cell/DatePicker.vue

@@ -7,6 +7,7 @@ import {
   ReadonlyInj,
   computed,
   inject,
+  isDrawerOrModalExist,
   ref,
   useSelectedCellKeyupListener,
   watch,
@@ -76,8 +77,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (!open.value) {
@@ -93,8 +94,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       }
       break
     case 'Escape':
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (open.value) {

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ReadonlyInj, inject, ref, useProject, useSelectedCellKeyupListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ReadonlyInj,
+  inject,
+  isDrawerOrModalExist,
+  ref,
+  useProject,
+  useSelectedCellKeyupListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -65,8 +74,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (!open.value) {
@@ -78,8 +87,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       }
       break
     case 'Escape':
-      // if expanded form is active skip resetting the active cell
-      if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      // skip if drawer / modal is active
+      if (isDrawerOrModalExist()) {
         return
       }
       if (open.value) {

packages/nc-gui/components/monaco/Editor.vue

@@ -3,7 +3,7 @@ import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 import type { editor as MonacoEditor } from 'monaco-editor'
-import { deepCompare, onMounted, ref, watch, isDrawerOrModalExist } from '#imports'
+import { deepCompare, isDrawerOrModalExist, onMounted, ref, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>

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

@@ -442,8 +442,8 @@ onClickOutside(smartTable, (e) => {
   )
     return
 
-  // if expanded form is active skip resetting the active cell
-  if (document.querySelector('.nc-drawer-expanded-form.active')) {
+  // skip if drawer / modal is active
+  if (isDrawerOrModalExist()) {
     return
   }