Merge pull request #7703 from nocodb/nc-fix/edit-issue-on-max-rowheight

Nc fix: URL and LongText cell double click edit enable issue

packages/nc-gui/components/cell/RichText.vue

@@ -187,7 +187,7 @@ watch(editorDom, () => {
         'max-w-[calc(100%_-_198px)] flex justify-end rounded-tr-2xl overflow-hidden': fullMode,
       }"
     >
-      <div class="nc-scrollbar-x-md">
+      <div class="nc-longtext-scrollbar">
         <CellRichTextSelectedBubbleMenu v-if="editor" :editor="editor" embed-mode />
       </div>
     </div>

packages/nc-gui/components/cell/TextArea.vue

@@ -173,7 +173,7 @@ const dragStart = (e: MouseEvent) => {
 }
 
 watch(editEnabled, () => {
-  if (editEnabled.value) {
+  if (editEnabled.value && isRichMode.value) {
     isVisible.value = true
   }
 })
@@ -227,7 +227,7 @@ watch(inputWrapperRef, () => {
         :ref="focus"
         v-model="vModel"
         :rows="isForm ? 5 : 4"
-        class="h-full w-full outline-none border-none nc-scrollbar-lg"
+        class="h-full w-full outline-none border-none nc-longtext-scrollbar"
         :class="{
           'p-2': editEnabled,
           'py-1 h-full': isForm,
@@ -270,8 +270,8 @@ watch(inputWrapperRef, () => {
       <NcTooltip
         v-if="!isVisible"
         placement="bottom"
-        class="!absolute right-1 hidden nc-text-area-expand-btn group-hover:block z-3"
-        :class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
+        class="!absolute top-1 hidden nc-text-area-expand-btn group-hover:block z-3"
+        :class="isForm ? 'right-1' : 'right-0'"
       >
         <template #title>{{ $t('title.expand') }}</template>
         <NcButton type="secondary" size="xsmall" data-testid="attachment-cell-file-picker-button" @click.stop="onExpand">
@@ -318,7 +318,7 @@ watch(inputWrapperRef, () => {
           <a-textarea
             ref="inputRef"
             v-model:value="vModel"
-            class="nc-text-area-expanded !py-1 !px-3 !text-black !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500 disabled:!bg-gray-50"
+            class="nc-text-area-expanded !py-1 !px-3 !text-black !cursor-text !min-h-[210px] !rounded-lg focus:border-brand-500 disabled:!bg-gray-50 nc-longtext-scrollbar"
             :placeholder="$t('activity.enterText')"
             :style="{ resize: 'both' }"
             :disabled="readOnly"
@@ -347,6 +347,9 @@ textarea:focus {
     @apply rounded-lg;
   }
 }
+.nc-longtext-scrollbar {
+  @apply scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300 scrollbar-track-transparent;
+}
 </style>
 
 <style lang="scss">
@@ -367,6 +370,10 @@ textarea:focus {
 
       max-width: min(1280px, 100vw - 100px);
       max-height: min(864px, 100vh - 100px);
+
+      .nc-longtext-scrollbar {
+        @apply scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300 scrollbar-track-transparent;
+      }
     }
   }
 }

packages/nc-gui/components/cell/Url.vue

@@ -77,7 +77,7 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
 const isForm = inject(IsFormInj)!
 
 const focus: VNodeRef = (el) =>
-  !isExpandedFormOpen.value && !isEditColumn.value && isForm.value && (el as HTMLInputElement)?.focus()
+  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLInputElement)?.focus()
 
 watch(
   () => editEnabled.value,

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -785,7 +785,7 @@ export function useMultiSelect(
               if (columnObj.uidt === UITypes.LongText) {
                 if (rowObj.row[columnObj.title] === '<br />') {
                   rowObj.row[columnObj.title] = e.key
-                } else {
+                } else if (parseProp(columnObj.meta).richMode) {
                   rowObj.row[columnObj.title] = rowObj.row[columnObj.title] ? rowObj.row[columnObj.title] + e.key : e.key
                 }
               } else {