From dae1c53a91489cf1a26cfd2adc4db61e4630e3b8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 13:57:39 +0800
Subject: [PATCH] feat(nc-gui): skip keydown logic if drawer / modal is active

---
 .../nc-gui/components/cell/DatePicker.vue     |  9 +++++----
 .../nc-gui/components/cell/DateTimePicker.vue | 19 ++++++++++++++-----
 packages/nc-gui/components/monaco/Editor.vue  |  2 +-
 .../nc-gui/components/smartsheet/Grid.vue     |  4 ++--
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 1f3469fea4..c0c662732d 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/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) {
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index ce7245348c..8819d23ce7 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/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) {
diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index 06a2b952d0..ee913fd19c 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 083e96dd3f..b934fad0b9 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/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
   }