fix(gui-v2): use cellRef for dropzone and teleport

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
-import Modal from './Modal.vue'
 import { useSortable } from './sort'
+import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { onMounted, ref, useDropZone, watch } from '#imports'
+import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
 
 interface Props {
@@ -20,16 +20,18 @@ const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const dropZoneRef = ref<HTMLTableDataCellElement>()
-
 const sortableRef = ref<HTMLDivElement>()
 
+const { cellRefs } = useSmartsheetStoreOrThrow()!
+
 const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
   useProvideAttachmentCell(updateModelValue)
 
+const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
+
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
-const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
 
 /** on new value, reparse our stored attachments */
 watch(
@@ -52,25 +54,17 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
-
-/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
-onMounted(() => {
-  if (typeof document !== 'undefined') {
-    dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement
-    console.log(dropZoneRef.value)
-  }
-})
 </script>
 
 <template>
   <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!isReadonly && !dragging && dropZoneRef">
+    <template v-if="!isReadonly && !dragging && !!currentCellRef">
       <general-overlay
         v-model="isOverDropZone"
         inline
-        :target="`td[data-key='${rowIndex}${column.id}']`"
+        :target="currentCellRef"
         class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
+  onClickOutside,
   onMounted,
   provide,
   reactive,
   ref,
+  useEventListener,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
   useSmartsheetStoreOrThrow,
-  useTemplateRefsList,
   useViewData,
   watch,
 } from '#imports'
@@ -341,7 +341,7 @@ const onNavigate = (dir: NavigateDir) => {
               <td
                 v-for="(columnObj, colIndex) of fields"
                 :ref="cellRefs.set"
-                :key="rowIndex + columnObj.title"
+                :key="columnObj.id"
                 class="cell relative cursor-pointer nc-grid-cell"
                 :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,