From 24a1a2ca6440a52cb20e6f39e1d99bdf2c5485bb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 16:23:49 +0530
Subject: [PATCH] fix(gui): trigger single select dropdown on clicking anywhere
 in the cell(td)

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

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 99a26e65a2..09ded5e866 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -273,7 +273,6 @@ const onTagClick = (e: Event, onClose: Function) => {
   }
 }
 
-
 const cellClickHook = inject(CellClickHookInj)
 
 const toggleMenu = () => {
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 4bea41e466..accb0576e4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import { onUnmounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
+  CellClickHookInj,
   ColumnInj,
   EditModeInj,
   IsFormInj,
@@ -180,7 +182,25 @@ const search = () => {
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
 
+// prevent propagation of keydown event if select is open
+const onKeydown = (e: KeyboardEvent) => {
+  if (isOpen.value && (active.value || editable.value)) {
+    e.stopPropagation()
+  }
+  if (e.key === 'Enter') {
+    e.stopPropagation()
+  }
+}
+
+const onSelect = () => {
+  isOpen.value = false
+}
+
+const cellClickHook = inject(CellClickHookInj)
+
 const toggleMenu = (e: Event) => {
+  if (cellClickHook) return
+
   // todo: refactor
   // check clicked element is clear icon
   if (
@@ -193,19 +213,15 @@ const toggleMenu = (e: Event) => {
   isOpen.value = editAllowed.value && !isOpen.value
 }
 
-// prevent propagation of keydown event if select is open
-const onKeydown = (e: KeyboardEvent) => {
-  if (isOpen.value && (active.value || editable.value)) {
-    e.stopPropagation()
-  }
-  if (e.key === 'Enter') {
-    e.stopPropagation()
-  }
-}
-
-const onSelect = () => {
-  isOpen.value = false
+const cellClickHookHandler = () => {
+  isOpen.value = editAllowed.value && !isOpen.value
 }
+onMounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
+onUnmounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
 </script>
 
 <template>