From 493c7e7b33fc9fa19d90cabe2e1e782238995f5e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 1 Feb 2023 16:18:31 +0530
Subject: [PATCH] fix(gui): trigger dropdown on clicking anywhere in the cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 29 ++++++++++++++-----
 .../components/smartsheet/TableDataCell.vue   |  8 +++--
 packages/nc-gui/context/index.ts              |  1 +
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 5db588e070..99a26e65a2 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/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
-    class="nc-multi-select h-full w-full flex items-center"
-    :class="{ 'read-only': readOnly }"
-    @click="isOpen = editAllowed && !isOpen"
-  >
+  <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
     <a-select
       ref="aselect"
       v-model:value="vModel"
diff --git a/packages/nc-gui/components/smartsheet/TableDataCell.vue b/packages/nc-gui/components/smartsheet/TableDataCell.vue
index 91bb00a1b1..932c61519b 100644
--- a/packages/nc-gui/components/smartsheet/TableDataCell.vue
+++ b/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>
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 83bd827ecd..1b7a53e790 100644
--- a/packages/nc-gui/context/index.ts
+++ b/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')