From f01d99fe666924416665b38d7cc063c5db8f97b2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Fri, 17 May 2024 22:05:40 +0530
Subject: [PATCH] Nc fix: disable undo redo if expanded form is open  (#8509)

* fix(nc-gui): disable undo redo if expanded form is open

* fix(nc-gui): date time related picker open in background issue if expanded form is open

* chore(nc-gui): lint
---
 packages/nc-gui/components/cell/DatePicker.vue     | 13 ++++++++++++-
 packages/nc-gui/components/cell/DateTimePicker.vue | 13 ++++++++++++-
 packages/nc-gui/components/cell/TimePicker.vue     | 13 ++++++++++++-
 packages/nc-gui/components/cell/YearPicker.vue     | 13 ++++++++++++-
 packages/nc-gui/composables/useUndoRedo.ts         |  2 +-
 packages/nc-gui/utils/browserUtils.ts              |  1 +
 6 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 6945db88b3..ab5b0cd2ca 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -205,7 +205,18 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+  if (
+    e.altKey ||
+    e.ctrlKey ||
+    e.shiftKey ||
+    e.metaKey ||
+    !isGrid.value ||
+    isExpandedForm.value ||
+    isEditColumn.value ||
+    isExpandedFormOpen()
+  ) {
+    return
+  }
 
   switch (e.key) {
     case ';':
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index d607b4def2..7a5e3a542c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -269,7 +269,18 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+  if (
+    e.altKey ||
+    e.ctrlKey ||
+    e.shiftKey ||
+    e.metaKey ||
+    !isGrid.value ||
+    isExpandedForm.value ||
+    isEditColumn.value ||
+    isExpandedFormOpen()
+  ) {
+    return
+  }
 
   switch (e.key) {
     case ';':
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 6c535db1e6..d2b273099b 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -185,7 +185,18 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+  if (
+    e.altKey ||
+    e.ctrlKey ||
+    e.shiftKey ||
+    e.metaKey ||
+    !isGrid.value ||
+    isExpandedForm.value ||
+    isEditColumn.value ||
+    isExpandedFormOpen()
+  ) {
+    return
+  }
 
   switch (e.key) {
     case ';':
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 5c630b7eb7..d2f3f50aca 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -176,7 +176,18 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey || !isGrid.value || isExpandedForm.value || isEditColumn.value) return
+  if (
+    e.altKey ||
+    e.ctrlKey ||
+    e.shiftKey ||
+    e.metaKey ||
+    !isGrid.value ||
+    isExpandedForm.value ||
+    isEditColumn.value ||
+    isExpandedFormOpen()
+  ) {
+    return
+  }
 
   switch (e.key) {
     case ';':
diff --git a/packages/nc-gui/composables/useUndoRedo.ts b/packages/nc-gui/composables/useUndoRedo.ts
index 566e1b3474..463eeb4765 100644
--- a/packages/nc-gui/composables/useUndoRedo.ts
+++ b/packages/nc-gui/composables/useUndoRedo.ts
@@ -167,7 +167,7 @@ export const useUndoRedo = createSharedComposable(() => {
   useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
 
-    if (e && (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) return
+    if ((e && (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) || isExpandedFormOpen()) return
 
     if (cmdOrCtrl && !e.altKey) {
       switch (e.keyCode) {
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index 22d928e104..e855ffeb96 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -2,6 +2,7 @@
 export const isMac = () => /Mac/i.test(navigator.platform)
 export const isDrawerExist = () => document.querySelector('.ant-drawer-open')
 export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer-open')
+export const isExpandedFormOpen = () => document.querySelector('.nc-drawer-expanded-form.active')
 export const isExpandedCellInputExist = () => document.querySelector('.expanded-cell-input')
 export const cmdKActive = () => document.querySelector('.cmdk-modal-active')