From 07728342d8532de3dd64852c0f9ec10937882c2b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 5 Nov 2022 13:21:35 +0530
Subject: [PATCH] fix: proper multi/single select behaviour with keyboard

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 39 +++++--------------
 .../nc-gui/components/cell/SingleSelect.vue   | 34 +++++++---------
 .../nc-gui/components/smartsheet/Cell.vue     |  4 +-
 .../nc-gui/components/smartsheet/Grid.vue     |  8 ++--
 4 files changed, 30 insertions(+), 55 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 4e0664b2e1..6d5d704321 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -74,36 +74,19 @@ 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
     : [],
 )
 
-
-const v = Math.floor(Math.random() *1000)
-
-const handleKeys = (e: KeyboardEvent) => {
-  console.log(`handleKeys ${v}`, e.key)
-  if (!active.value) return true
-  switch (e.key) {
-    case 'ArrowDown':
-    case 'ArrowUp':
-      if (isOpen.value) {
-        e.stopPropagation()
-      }
-      break
-    case 'Enter':
-      e.stopPropagation()
-      break
-  }
-}
+const v = Math.floor(Math.random() * 1000)
 
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
@@ -146,17 +129,14 @@ watch(isOpen, (n, _o) => {
   }
 })
 
-
 useSelectedCellKeyupListener(active, (e) => {
   switch (e.key) {
     case 'Escape':
       isOpen.value = false
-      select?.value?.blur()
       break
     case 'Enter':
       if (active.value && !isOpen.value) {
         isOpen.value = true
-        e.stopPropagation()
       }
       break
   }
@@ -167,15 +147,16 @@ useSelectedCellKeyupListener(active, (e) => {
   <a-select
     ref="aselect"
     v-model:value="vModel"
+    v-model:open="isOpen"
     mode="multiple"
     class="w-full"
     :bordered="false"
     :show-arrow="!readOnly"
     :show-search="false"
-    v-model:open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
+    @keydown.enter.stop
     @click="isOpen = active && !isOpen"
   >
     <a-select-option
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 30a97f7b57..cf7615bf05 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -45,24 +45,6 @@ const options = computed<SelectOptionType[]>(() => {
   return []
 })
 
-const handleKeys = (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Escape':
-      e.preventDefault()
-      isOpen.value = false
-      break
-    case 'ArrowDown':
-    case 'ArrowUp':
-      if (isOpen.value) e.stopPropagation()
-      break
-    case 'Enter':
-      isOpen.value = true
-      e.stopPropagation()
-      break
-  }
-}
-
-
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -72,7 +54,6 @@ const handleClose = (e: MouseEvent) => {
 
 useEventListener(document, 'click', handleClose)
 
-
 watch(isOpen, (n, _o) => {
   if (!n) {
     aselect.value?.$el?.querySelector('input')?.blur()
@@ -80,6 +61,19 @@ watch(isOpen, (n, _o) => {
     aselect.value?.$el?.querySelector('input')?.focus()
   }
 })
+
+useSelectedCellKeyupListener(active, (e) => {
+  switch (e.key) {
+    case 'Escape':
+      isOpen.value = false
+      break
+    case 'Enter':
+      if (active.value && !isOpen.value) {
+        isOpen.value = true
+      }
+      break
+  }
+})
 </script>
 
 <template>
@@ -94,7 +88,7 @@ watch(isOpen, (n, _o) => {
     :show-arrow="!readOnly && (active || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
     @select="isOpen = false"
-    @keydown="isOpen ? handleKeys : null"
+    @keydown.enter.stop
     @click="isOpen = active && !isOpen"
   >
     <a-select-option
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 32cbf90aec..12636665a8 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -128,9 +128,9 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
   <div
     class="nc-cell w-full"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
-><!--    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
+    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
-  >-->
+  >
     <LazyCellTextArea v-if="isTextArea" v-model="vModel" />
     <LazyCellCheckbox v-else-if="isBoolean" v-model="vModel" />
     <LazyCellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index f50291a631..6080ad5578 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -145,8 +145,8 @@ const getContainerScrollForElement = (
     relativePos.right + (offset?.right || 0) > 0
       ? container.scrollLeft + relativePos.right + (offset?.right || 0)
       : relativePos.left - (offset?.left || 0) < 0
-        ? container.scrollLeft + relativePos.left - (offset?.left || 0)
-        : container.scrollLeft
+      ? container.scrollLeft + relativePos.left - (offset?.left || 0)
+      : container.scrollLeft
 
   /*
    * If the element is below the container, scroll down (positive)
@@ -156,8 +156,8 @@ const getContainerScrollForElement = (
     relativePos.bottom + (offset?.bottom || 0) > 0
       ? container.scrollTop + relativePos.bottom + (offset?.bottom || 0)
       : relativePos.top - (offset?.top || 0) < 0
-        ? container.scrollTop + relativePos.top - (offset?.top || 0)
-        : container.scrollTop
+      ? container.scrollTop + relativePos.top - (offset?.top || 0)
+      : container.scrollTop
 
   return scroll
 }