fix(gui): trigger single select dropdown on clicking anywhere in the cell(td)

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/MultiSelect.vue

@@ -273,7 +273,6 @@ const onTagClick = (e: Event, onClose: Function) => {
   }
 }
 
-
 const cellClickHook = inject(CellClickHookInj)
 
 const toggleMenu = () => {

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>