From e92f8f1b254343926820481064b9d3704a3483c3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 28 Oct 2022 12:07:58 +0530
Subject: [PATCH] fix(gui): block cell level arrow navigation when single
 select is open

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/SingleSelect.vue   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index cb9258505c..bdccb6a872 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -2,7 +2,17 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  IsKanbanInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  ref,
+  useEventListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -34,7 +44,7 @@ const options = computed<SelectOptionType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
+      (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -50,6 +60,11 @@ const handleKeys = (e: KeyboardEvent) => {
       e.preventDefault()
       isOpen.value = false
       break
+    case 'ArrowDown':
+    case 'ArrowUp':
+    case 'Enter':
+      e.stopPropagation()
+      break
   }
 }
 
@@ -110,9 +125,11 @@ watch(isOpen, (n, _o) => {
 .rounded-tag {
   @apply py-0 px-[12px] rounded-[12px];
 }
+
 :deep(.ant-tag) {
   @apply "rounded-tag";
 }
+
 :deep(.ant-select-clear) {
   opacity: 1;
 }