From ed56f6b7400738d95304851fc94b95a2815fb339 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Apr 2023 15:45:40 +0800
Subject: [PATCH 1/2] feat(nc-gui): add DivDataCell

---
 .../components/smartsheet/DivDataCell.vue       | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 packages/nc-gui/components/smartsheet/DivDataCell.vue

diff --git a/packages/nc-gui/components/smartsheet/DivDataCell.vue b/packages/nc-gui/components/smartsheet/DivDataCell.vue
new file mode 100644
index 0000000000..652189906e
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/DivDataCell.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { CellClickHookInj, CurrentCellInj, createEventHook, ref } from '#imports'
+
+const el = ref()
+
+const cellClickHook = createEventHook()
+
+provide(CellClickHookInj, cellClickHook)
+
+provide(CurrentCellInj, el)
+</script>
+
+<template>
+  <div ref="el" @click="cellClickHook.trigger($event)">
+    <slot />
+  </div>
+</template>

From bc9b8af46b34e30a29b8a9212586ddc8e49aa84d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 17 Apr 2023 15:46:06 +0800
Subject: [PATCH 2/2] fix(nc-gui): apply LazySmartsheetDivDataCell

---
 .../nc-gui/components/smartsheet/Form.vue     | 26 ++++++++++---------
 .../smartsheet/expanded-form/index.vue        |  4 +--
 .../form/[viewId]/index/index.vue             |  4 +--
 .../form/[viewId]/index/survey.vue            |  4 +--
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 6adeda9da5..05a26b2304 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -727,18 +727,20 @@ watch(view, (nextView) => {
                       },
                     ]"
                   >
-                    <LazySmartsheetCell
-                      v-model="formState[element.title]"
-                      class="nc-input"
-                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                      :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
-                      :column="element"
-                      :edit-enabled="editEnabled[index]"
-                      @click="editEnabled[index] = true"
-                      @cancel="editEnabled[index] = false"
-                      @update:edit-enabled="editEnabled[index] = $event"
-                      @click.stop.prevent
-                    />
+                    <LazySmartsheetDivDataCell class="relative">
+                      <LazySmartsheetCell
+                        v-model="formState[element.title]"
+                        class="nc-input"
+                        :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                        :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                        :column="element"
+                        :edit-enabled="editEnabled[index]"
+                        @click="editEnabled[index] = true"
+                        @cancel="editEnabled[index] = false"
+                        @update:edit-enabled="editEnabled[index] = $event"
+                        @click.stop.prevent
+                      />
+                    </LazySmartsheetDivDataCell>
                   </a-form-item>
 
                   <div class="text-gray-500 text-xs" data-testid="nc-form-input-help-text-label">{{ element.description }}</div>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 0c1e5285c7..d1dc2d97f8 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -329,7 +329,7 @@ export default {
 
               <LazySmartsheetHeaderCell v-else :column="col" />
 
-              <div
+              <LazySmartsheetDivDataCell
                 :ref="i ? null : (el) => (cellWrapperEl = el)"
                 class="!bg-white rounded px-1 min-h-[35px] flex items-center mt-2 relative"
               >
@@ -343,7 +343,7 @@ export default {
                   :active="true"
                   @update:model-value="changedColumns.add(col.title)"
                 />
-              </div>
+              </LazySmartsheetDivDataCell>
             </div>
           </div>
         </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index b0b09b4a51..e67aeffe4a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -146,7 +146,7 @@ const onDecode = async (scannedCodeValue: string) => {
                   </div>
 
                   <div>
-                    <div class="flex">
+                    <LazySmartsheetDivDataCell class="flex relative">
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(field)"
                         :model-value="null"
@@ -178,7 +178,7 @@ const onDecode = async (scannedCodeValue: string) => {
                           <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
                         </div>
                       </a-button>
-                    </div>
+                    </LazySmartsheetDivDataCell>
 
                     <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
                       <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 90d850f719..1a696db7a9 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -283,7 +283,7 @@ onMounted(() => {
               />
             </div>
 
-            <div v-if="field.title">
+            <LazySmartsheetDivDataCell v-if="field.title" class="relative">
               <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 v-model="formState[field.title]"
@@ -323,7 +323,7 @@ onMounted(() => {
                   <MaterialSymbolsKeyboardReturn class="mx-1 text-primary" /> to make a line break
                 </div>
               </div>
-            </div>
+            </LazySmartsheetDivDataCell>
           </div>
 
           <div class="ml-1 mt-4 flex w-full text-lg">