From 915575309db1b715dc39a3024dc067c55ab325cd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 22 Nov 2022 01:18:48 +0530
Subject: [PATCH] feat: close toolbar menu on escape key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |  7 ++++-
 .../smartsheet/toolbar/FieldsMenu.vue         |  7 ++++-
 .../smartsheet/toolbar/SortListMenu.vue       |  7 ++++-
 .../smartsheet/toolbar/ViewActions.vue        |  7 ++++-
 .../composables/useMenuCloseOnEsc/index.ts    | 28 +++++++++++++++++++
 5 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui/composables/useMenuCloseOnEsc/index.ts

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 8e55617112..18c0d42120 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -8,6 +8,7 @@ import {
   inject,
   ref,
   useGlobal,
+  useMenuCloseOnEsc,
   useNuxtApp,
   useSmartsheetStoreOrThrow,
   useViewFilters,
@@ -62,10 +63,14 @@ const filterAutoSaveLoc = computed({
     filterAutoSave.value = val
   },
 })
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
+  <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 89f97f45b6..07fa87a44d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -14,6 +14,7 @@ import {
   inject,
   ref,
   resolveComponent,
+  useMenuCloseOnEsc,
   useNuxtApp,
   useViewColumns,
   watch,
@@ -119,10 +120,14 @@ const getIcon = (c: ColumnType) =>
   h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: c,
   })
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
+  <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 419588c57f..26f3791611 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -9,6 +9,7 @@ import {
   getSortDirectionOptions,
   inject,
   ref,
+  useMenuCloseOnEsc,
   useViewSorts,
   watch,
 } from '#imports'
@@ -37,10 +38,14 @@ watch(
   },
   { immediate: true },
 )
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
-  <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
+  <a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index f525feb263..fe1d7c29e3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -8,6 +8,7 @@ import {
   message,
   ref,
   useI18n,
+  useMenuCloseOnEsc,
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
@@ -79,11 +80,15 @@ async function changeLockType(type: LockType) {
 }
 
 const { isSqlView } = useSmartsheetStoreOrThrow()
+
+const open = ref(false)
+
+useMenuCloseOnEsc(open)
 </script>
 
 <template>
   <div>
-    <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
+    <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
       <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
diff --git a/packages/nc-gui/composables/useMenuCloseOnEsc/index.ts b/packages/nc-gui/composables/useMenuCloseOnEsc/index.ts
new file mode 100644
index 0000000000..2365b1ff0d
--- /dev/null
+++ b/packages/nc-gui/composables/useMenuCloseOnEsc/index.ts
@@ -0,0 +1,28 @@
+import { isClient } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+export function useMenuCloseOnEsc(open: Ref<boolean>) {
+  const handler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      open.value = false
+    }
+  }
+  if (isClient) {
+    watch(open, (nextVal, _, cleanup) => {
+      // bind listener when `open` is truthy
+      if (nextVal) {
+        document.addEventListener('keydown', handler, true)
+        // if `open` is falsy then remove the event handler
+      } else {
+        document.removeEventListener('keydown', handler, true)
+      }
+
+      // cleanup is called whenever the watcher is re-evaluated or stopped
+      cleanup(() => {
+        document.removeEventListener('keydown', handler, true)
+      })
+    })
+  }
+}