Merge pull request #4451 from nocodb/feat/close-menu-on-escape

feat: Toolbar - close toolbar menu on escape key press

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">

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">

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">

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

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)
+      })
+    })
+  }
+}