From f59ee815860a114503a165d3a34fd4a7862af3b7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 01:40:24 +0530
Subject: [PATCH] feat: open select options on enter key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 32 ++++++++++++++-----
 .../nc-gui/components/cell/SingleSelect.vue   |  3 ++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 9fe19858b0..d57f4490da 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -16,6 +16,7 @@ import {
   useProject,
   watch,
 } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -73,13 +74,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el) => el.title === a)
-            const opb = options.value.find((el) => el.title === b)
-            if (opa && opb) {
-              return opa.order! - opb.order!
-            }
-            return 0
-          })
+          const opa = options.value.find((el) => el.title === a)
+          const opb = options.value.find((el) => el.title === b)
+          if (opa && opb) {
+            return opa.order! - opb.order!
+          }
+          return 0
+        })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -93,9 +94,13 @@ const handleKeys = (e: KeyboardEvent) => {
       break
     case 'ArrowDown':
     case 'ArrowUp':
+      e.stopPropagation()
+      break
     case 'Enter':
+      isOpen.value = true
       e.stopPropagation()
       break
+
   }
 }
 
@@ -135,11 +140,17 @@ watch(
 watch(isOpen, (n, _o) => {
   if (!n) aselect.value?.$el.blur()
 })
+
+useEventListener(document, 'keydown', (e) => {
+  if (active.value && e.key === 'Enter') {
+    isOpen.value = true
+  }
+})
 </script>
 
 <template>
   <a-select
-    ref="aselect"
+    ref="select"
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
@@ -223,18 +234,23 @@ watch(isOpen, (n, _o) => {
   margin-right: -6px;
   margin-left: 3px;
 }
+
 .ms-close-icon:before {
   display: block;
 }
+
 .ms-close-icon:hover {
   color: rgba(0, 0, 0, 0.45);
 }
+
 .rounded-tag {
   @apply py-0 px-[12px] rounded-[12px];
 }
+
 :deep(.ant-tag) {
   @apply "rounded-tag" my-[2px];
 }
+
 :deep(.ant-tag-close-icon) {
   @apply "text-slate-500";
 }
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index bdccb6a872..741e3ba7f4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -62,7 +62,10 @@ const handleKeys = (e: KeyboardEvent) => {
       break
     case 'ArrowDown':
     case 'ArrowUp':
+      e.stopPropagation()
+      break
     case 'Enter':
+      isOpen.value = true
       e.stopPropagation()
       break
   }