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

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

packages/nc-gui/components/cell/MultiSelect.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, SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
+  CellClickHookInj,
   ColumnInj,
   IsKanbanInj,
   ReadonlyInj,
@@ -16,7 +18,6 @@ import {
   onMounted,
   reactive,
   ref,
-  useEventListener,
   useMetas,
   useProject,
   useRoles,
@@ -144,8 +145,6 @@ onMounted(() => {
   })
 })
 
-useEventListener(document, 'click', handleClose)
-
 watch(
   () => modelValue,
   () => {
@@ -273,14 +272,28 @@ const onTagClick = (e: Event, onClose: Function) => {
     onClose()
   }
 }
+
+
+const cellClickHook = inject(CellClickHookInj)
+
+const toggleMenu = () => {
+  if (cellClickHook) return
+  isOpen.value = editAllowed.value && !isOpen.value
+}
+
+const cellClickHookHandler = () => {
+  isOpen.value = editAllowed.value && !isOpen.value
+}
+onMounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
+onUnmounted(() => {
+  cellClickHook?.on(cellClickHookHandler)
+})
 </script>
 
 <template>
-  <div
+  <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
-    class="nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly }"
-    @click="isOpen = editAllowed && !isOpen"
-  >
     <a-select
       ref="aselect"
       v-model:value="vModel"

packages/nc-gui/components/smartsheet/TableDataCell.vue

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
+import { CellClickHookInj, createEventHook, onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
 
 const { cellRefs } = useSmartsheetStoreOrThrow()
 
 const el = ref<HTMLTableDataCellElement>()
 
+const cellClickHook = createEventHook()
+
+provide(CellClickHookInj, cellClickHook)
+
 onMounted(() => {
   cellRefs.value.push(el.value!)
 })
@@ -18,7 +22,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <td ref="el">
+  <td ref="el" @click="cellClickHook.trigger($event)">
     <slot />
   </td>
 </template>

packages/nc-gui/context/index.ts

@@ -32,3 +32,4 @@ export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('s
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
 export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
 export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
+export const CellClickHookInj: InjectionKey<EventHook<MouseEvent> | undefined> = Symbol('cell-click-injection')