From a047c80b2da31b53c4d7d8f664ac5f61f30bf42a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 2 Feb 2023 00:01:25 +0530
Subject: [PATCH] fix(gui): close dropdown on pressing escape key in form view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  |  7 ++++++-
 packages/nc-gui/components/cell/SingleSelect.vue | 11 +++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 0ec3ae35f0..00c0fa2486 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -198,6 +198,11 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
+// close dropdown list on escape
+useSelectedCellKeyupListener(isOpen, (e) => {
+  if (e.key === 'Escape') isOpen.value = false
+})
+
 const activeOptCreateInProgress = ref(0)
 
 async function addIfMissingAndSave() {
@@ -442,7 +447,7 @@ useEventListener(document, 'click', handleClose, true)
   }
 }
 
-:deep(.ant-select-selector){
+:deep(.ant-select-selector) {
   @apply !px-0;
 }
 </style>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 78e7318c6f..66acdd312b 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -16,10 +16,10 @@ import {
   enumColor,
   extractSdkResponseErrorMsg,
   inject,
+  isDrawerOrModalExist,
   ref,
   useRoles,
   useSelectedCellKeyupListener,
-  isDrawerOrModalExist,
   watch,
 } from '#imports'
 
@@ -133,6 +133,11 @@ useSelectedCellKeyupListener(active, (e) => {
   }
 })
 
+// close dropdown list on escape
+useSelectedCellKeyupListener(isOpen, (e) => {
+  if (e.key === 'Escape') isOpen.value = false
+})
+
 async function addIfMissingAndSave() {
   if (!searchVal.value || isPublic.value) return false
 
@@ -224,8 +229,6 @@ onUnmounted(() => {
   cellClickHook?.on(cellClickHookHandler)
 })
 
-
-
 const handleClose = (e: MouseEvent) => {
   if (isOpen.value && aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -310,7 +313,7 @@ useEventListener(document, 'click', handleClose, true)
   }
 }
 
-:deep(.ant-select-selector){
+:deep(.ant-select-selector) {
   @apply !px-0;
 }
 </style>