Merge pull request #3495 from nocodb/fix/fixed-scroll-issue-with-add-provide

vue3: Fixed scroll issue with EditOrAdd component

packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@@ -20,8 +20,6 @@ const advancedOptions = ref(false)
 
 const { getMeta } = useMetas()
 
-const editOrAddRef = ref<HTMLElement>()
-
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const onlyNameUpdateOnEditColumns = [UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup]
@@ -79,28 +77,10 @@ onMounted(() => {
     formState.value.column_name = formState.value?.title
   }
 })
-
-const handleClose = (e: MouseEvent) => {
-  const target = e.target as HTMLElement
-
-  if (
-    target &&
-    editOrAddRef?.value &&
-    !editOrAddRef.value.contains(target) &&
-    !target.closest('.ant-dropdown') &&
-    !target.closest('.ant-select') &&
-    !target.closest('.ant-select-item')
-  ) {
-    emit('cancel')
-  }
-}
-
-useEventListener(document, 'click', handleClose)
 </script>
 
 <template>
   <div
-    ref="editOrAddRef"
     class="w-[400px] max-h-[95vh] bg-gray-50 shadow-lg p-6 overflow-auto !border"
     :class="{ '!w-[600px]': formState.uidt === UITypes.Formula }"
     @click.stop

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -15,12 +15,6 @@ const { isUIAllowed } = useUIPermission()
 provide(ColumnInj, column)
 
 const editColumnDropdown = ref(false)
-
-function onVisibleChange() {
-  // only allow to close the EditOrAdd component
-  // by clicking cancel button
-  editColumnDropdown.value = true
-}
 </script>
 
 <template>
@@ -34,13 +28,7 @@ function onVisibleChange() {
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" @edit="editColumnDropdown = true" />
     </template>
 
-    <a-dropdown
-      v-model:visible="editColumnDropdown"
-      class="h-full"
-      :trigger="['click']"
-      placement="bottomRight"
-      @visible-change="onVisibleChange"
-    >
+    <a-dropdown v-model:visible="editColumnDropdown" class="h-full" :trigger="['click']" placement="bottomRight">
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -95,12 +95,6 @@ const tooltipMsg = computed(() => {
   }
   return ''
 })
-
-function onVisibleChange() {
-  // only allow to close the EditOrAdd component
-  // by clicking cancel button
-  editColumnDropdown.value = true
-}
 </script>
 
 <template>
@@ -121,13 +115,7 @@ function onVisibleChange() {
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
-    <a-dropdown
-      v-model:visible="editColumnDropdown"
-      class="h-full"
-      :trigger="['click']"
-      placement="bottomRight"
-      @visible-change="onVisibleChange"
-    >
+    <a-dropdown v-model:visible="editColumnDropdown" class="h-full" :trigger="['click']" placement="bottomRight">
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider