From 4d4514c7d49281266a6f5c07cf0127fda5f84d4b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 13:25:45 +0800
Subject: [PATCH 1/2] feat(nc-gui): add useMenuCloseOnEsc to kanban toolbar

---
 .../smartsheet/toolbar/KanbanStackEditOrAdd.vue  | 16 +++++++++-------
 .../components/smartsheet/toolbar/StackedBy.vue  | 11 +++++++----
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
index cf56ccf3a7..bde75f2511 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow } from '#imports'
+import { IsLockedInj, IsPublicInj, useKanbanViewStoreOrThrow, useMenuCloseOnEsc } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -7,12 +7,14 @@ const { groupingFieldColumn } = useKanbanViewStoreOrThrow()
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const addOrEditStackDropdown = ref(false)
-
 const IsPublic = inject(IsPublicInj, ref(false))
 
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
+
 const handleSubmit = async () => {
-  addOrEditStackDropdown.value = false
+  open.value = false
 }
 
 provide(IsKanbanInj, ref(true))
@@ -21,7 +23,7 @@ provide(IsKanbanInj, ref(true))
 <template>
   <a-dropdown
     v-if="!IsPublic && isUIAllowed('edit-column')"
-    v-model:visible="addOrEditStackDropdown"
+    v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-add-edit-stack-menu"
   >
@@ -42,10 +44,10 @@ provide(IsKanbanInj, ref(true))
     </div>
     <template #overlay>
       <LazySmartsheetColumnEditOrAddProvider
-        v-if="addOrEditStackDropdown"
+        v-if="open"
         :column="groupingFieldColumn"
         @submit="handleSubmit"
-        @cancel="addOrEditStackDropdown = false"
+        @cancel="open = false"
         @click.stop
         @keydown.stop
       />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
index 50440ecb9c..60ce79502f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
@@ -12,6 +12,7 @@ import {
   inject,
   ref,
   useKanbanViewStoreOrThrow,
+  useMenuCloseOnEsc,
   useViewColumns,
   watch,
 } from '#imports'
@@ -30,7 +31,9 @@ const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, m
 
 const { kanbanMetaData, loadKanbanMeta, loadKanbanData, updateKanbanMeta, groupingField } = useKanbanViewStoreOrThrow()
 
-const stackedByDropdown = ref(false)
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 
 watch(
   () => activeView.value?.id,
@@ -68,14 +71,14 @@ const singleSelectFieldOptions = computed<SelectProps['options']>(() => {
 })
 
 const handleChange = () => {
-  stackedByDropdown.value = false
+  open.value = false
 }
 </script>
 
 <template>
   <a-dropdown
     v-if="!IsPublic"
-    v-model:visible="stackedByDropdown"
+    v-model:visible="open"
     :trigger="['click']"
     overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
   >
@@ -97,7 +100,7 @@ const handleChange = () => {
     </div>
     <template #overlay>
       <div
-        v-if="stackedByDropdown"
+        v-if="open"
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
         @click.stop
       >

From 381aa3e3e44afaab5bd7eaeaede127a05128f69b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 22 Nov 2022 13:26:56 +0800
Subject: [PATCH 2/2] fix(nc-gui): close dropdown if a menu item is clicked

---
 packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index fe1d7c29e3..8289ff6dde 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -108,7 +108,7 @@ useMenuCloseOnEsc(open)
       </a-button>
 
       <template #overlay>
-        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" data-testid="toolbar-actions">
+        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" data-testid="toolbar-actions" @click="open = false">
           <a-menu-item-group>
             <a-sub-menu
               v-if="isUIAllowed('view-type')"