From 55fae33841076870f0b4fee00068f75ce89f2757 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:28:44 +0000
Subject: [PATCH 1/5] fix(nc-gui): longtext cell focus issue on cell active

---
 packages/nc-gui/components/cell/TextArea.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index c51602a5c5..0ffed54ba7 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { VNodeRef } from '@vue/runtime-core'
 import type { AIRecordType } from 'nocodb-sdk'
 
 const props = defineProps<{
@@ -70,9 +69,6 @@ const mousePosition = ref<
 
 const isDragging = ref(false)
 
-const focus: VNodeRef = (el) =>
-  !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLTextAreaElement)?.focus()
-
 const height = computed(() => {
   if (isExpandedFormOpen.value) return 36 * 4
 
@@ -326,6 +322,14 @@ watch(
     immediate: true,
   },
 )
+
+const textAreaRef = ref<HTMLTextAreaElement>()
+
+watch(textAreaRef, (el) => {
+  if (el && !isExpandedFormOpen.value && !isEditColumn.value && !isForm.value) {
+    el.focus()
+  }
+})
 </script>
 
 <template>
@@ -394,7 +398,7 @@ watch(
         }"
       >
         <textarea
-          :ref="focus"
+          ref="textAreaRef"
           v-model="vModel"
           :rows="isForm ? 5 : 4"
           class="h-full w-full !outline-none nc-scrollbar-thin"

From fdfcbb17da9d07aaed9e6c766cb70b25a21cc11e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:28:44 +0000
Subject: [PATCH 2/5] fix(nc-gui): update searchCompare function to allow
 nested array search

---
 packages/nc-gui/lib/types.ts         |  3 +++
 packages/nc-gui/utils/commonUtils.ts | 26 ++++++++++++--------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 78013222cd..1db6c4bdd2 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -306,6 +306,8 @@ interface ProductFeedItem {
 
 type SordDirectionType = 'asc' | 'desc' | undefined
 
+type NestedArray<T> = T | NestedArray<T>[]
+
 export type {
   User,
   ProjectMetaInfo,
@@ -341,4 +343,5 @@ export type {
   SordDirectionType,
   ProductFeedItem,
   Attachment,
+  NestedArray,
 }
diff --git a/packages/nc-gui/utils/commonUtils.ts b/packages/nc-gui/utils/commonUtils.ts
index cc04552efe..e284f6cb66 100644
--- a/packages/nc-gui/utils/commonUtils.ts
+++ b/packages/nc-gui/utils/commonUtils.ts
@@ -75,11 +75,12 @@ export const isUnicodeEmoji = (emoji: string) => {
 /**
  * Performs a case-insensitive search to check if the `query` exists within the `source`.
  *
- * - If `source` is an array, the function checks if any element (converted to a string) contains the `query`.
- * - If `source` is a string or number, it checks if the `query` exists within `source` (case-insensitively).
- * - If `source` or `query` is `undefined`, they are treated as empty strings.
+ * - Handles strings, numbers, and arrays (including nested arrays) of strings/numbers.
+ * - Treats `undefined` as an empty string.
  *
- * @param source - The value to search within. Can be a string, number, or an array of strings/numbers.
+ * @param source - The value to search within. Can be:
+ *   - A string or number.
+ *   - A single-level or nested array of strings/numbers.
  * @param query - The value to search for. Treated as an empty string if `undefined`.
  * @returns `true` if the `query` is found within the `source` (case-insensitively), otherwise `false`.
  *
@@ -87,27 +88,24 @@ export const isUnicodeEmoji = (emoji: string) => {
  * ```typescript
  * // Single string or number search
  * searchCompare("Hello World", "world"); // true
- * searchCompare("OpenAI ChatGPT", "gpt"); // true
- * searchCompare("TypeScript", "JavaScript"); // false
+ * searchCompare(12345, "234"); // true
  *
  * // Array search
  * searchCompare(["apple", "banana", "cherry"], "Banana"); // true
  * searchCompare([123, 456, 789], "456"); // true
- * searchCompare([null, undefined, "test"], "TEST"); // true
+ *
+ * // Nested array search
+ * searchCompare(["apple", ["banana", ["cherry"]]], "cherry"); // true
+ * searchCompare([123, [456, [789]]], "456"); // true
  *
  * // Handling undefined
  * searchCompare(undefined, "test"); // false
  * searchCompare("test", undefined); // true
  * ```
  */
-export const searchCompare = (source?: string | number | (string | number | undefined)[], query?: string): boolean => {
+export const searchCompare = (source?: NestedArray<string | number | undefined>, query?: string): boolean => {
   if (ncIsArray(source)) {
-    return source.some((item) => {
-      return (item || '')
-        .toString()
-        .toLowerCase()
-        .includes((query || '').toLowerCase())
-    })
+    return source.some((item) => searchCompare(item, query))
   }
 
   return (source || '')

From 3424295fd7609cf5370f353a245ea68987815554 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:28:44 +0000
Subject: [PATCH 3/5] fix(nc-gui): text area related changes

---
 packages/nc-gui/components/cell/TextArea.vue     |  8 ++------
 .../column/UITypesOptionsWithSearch.vue          |  2 --
 .../components/smartsheet/grid/InfiniteTable.vue | 16 ++++++++++++++--
 .../nc-gui/components/smartsheet/grid/Table.vue  | 16 ++++++++++++++--
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 0ffed54ba7..4df3a62730 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -515,14 +515,10 @@ watch(textAreaRef, (el) => {
         :class="{
           'right-1': isForm,
           'right-0': !isForm,
-          'top-0': isGrid && !isExpandedFormOpen && !isForm && !(!rowHeight || rowHeight === 1),
+          'top-0 ': isGrid && !isExpandedFormOpen && !isForm,
+          '!right-2 ': isGrid && !isExpandedFormOpen && !isForm && ((editEnabled && !isVisible) || isForm),
           'top-1': !(isGrid && !isExpandedFormOpen && !isForm),
         }"
-        :style="
-          isGrid && !isExpandedFormOpen && !isForm && (!rowHeight || rowHeight === 1)
-            ? { top: '50%', transform: 'translateY(-50%)' }
-            : undefined
-        "
       >
         <NcTooltip
           v-if="!isVisible && !isForm && !readOnly && props.isAi && !isExpandedFormOpen && !isEditColumn"
diff --git a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
index 99a63bd714..5e62105fb4 100644
--- a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
@@ -14,8 +14,6 @@ const searchQuery = ref('')
 
 const { isMetaReadOnly } = useRoles()
 
-const { isFeatureEnabled } = useBetaFeatureToggle()
-
 const filteredOptions = computed(
   () => options.value?.filter((c) => searchCompare([c.name, UITypesName[c.name]], searchQuery.value)) ?? [],
 )
diff --git a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
index 5a128763fd..1b302fd17f 100644
--- a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
+++ b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
@@ -2724,10 +2724,18 @@ watch(vSelectedAllRecords, (selectedAll) => {
 
     &.align-top {
       @apply py-2;
+
+      &:has(.nc-cell textarea) {
+        @apply pr-0;
+      }
     }
 
     &.align-middle {
       @apply py-0;
+
+      &:has(.nc-cell textarea) {
+        @apply py-2 pr-0;
+      }
     }
 
     & > div {
@@ -2750,10 +2758,14 @@ watch(vSelectedAllRecords, (selectedAll) => {
     :deep(.nc-virtual-cell) {
       @apply !text-small;
 
+      textarea {
+        @apply !pr-8;
+      }
+
       .nc-cell-field,
       input,
       textarea {
-        @apply !text-small !p-0 m-0;
+        @apply !text-small !pl-0 !py-0 m-0;
       }
 
       &:not(.nc-display-value-cell) {
@@ -2772,7 +2784,7 @@ watch(vSelectedAllRecords, (selectedAll) => {
       a.nc-cell-field-link,
       input,
       textarea {
-        @apply !p-0 m-0;
+        @apply !pl-0 !py-0 m-0;
       }
 
       a.nc-cell-field-link {
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index bda48a7293..c6748b0775 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -2739,10 +2739,18 @@ onKeyStroke('ArrowDown', onDown)
 
     &.align-top {
       @apply py-2;
+
+      &:has(.nc-cell textarea) {
+        @apply pr-0;
+      }
     }
 
     &.align-middle {
       @apply py-0;
+
+      &:has(.nc-cell textarea) {
+        @apply py-2 pr-0;
+      }
     }
 
     & > div {
@@ -2765,10 +2773,14 @@ onKeyStroke('ArrowDown', onDown)
     :deep(.nc-virtual-cell) {
       @apply !text-small;
 
+      textarea {
+        @apply !pr-8;
+      }
+
       .nc-cell-field,
       input,
       textarea {
-        @apply !text-small !p-0 m-0;
+        @apply !text-small !pl-0 !py-0 m-0;
       }
 
       &:not(.nc-display-value-cell) {
@@ -2787,7 +2799,7 @@ onKeyStroke('ArrowDown', onDown)
       a.nc-cell-field-link,
       input,
       textarea {
-        @apply !p-0 m-0;
+        @apply !pl-0 !py-0 m-0;
       }
 
       a.nc-cell-field-link {

From 63106860816838c411b2eef5c8946d26b6d2b1f4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:28:44 +0000
Subject: [PATCH 4/5] fix(nc-gui): line height issue

---
 packages/nc-gui/components/cell/MultiSelect.vue           | 2 +-
 packages/nc-gui/components/cell/Rating.vue                | 2 +-
 packages/nc-gui/components/cell/User.vue                  | 2 +-
 .../nc-gui/components/smartsheet/grid/InfiniteTable.vue   | 6 ++++--
 packages/nc-gui/components/smartsheet/grid/Table.vue      | 6 ++++--
 packages/nc-gui/utils/cell.ts                             | 8 ++++----
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 19a8d5cde1..8223713743 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -428,7 +428,7 @@ const onFocus = () => {
         :style="{
           'display': '-webkit-box',
           'max-width': '100%',
-          '-webkit-line-clamp': rowHeightTruncateLines(rowHeight),
+          '-webkit-line-clamp': rowHeightTruncateLines(rowHeight, true),
           '-webkit-box-orient': 'vertical',
           'overflow': 'hidden',
         }"
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 8aaf4e99ab..9f83625e05 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -72,7 +72,7 @@ watch(rateDomRef, () => {
       'padding': isExpandedFormOpen ? '0px 8px' : '0px 2px',
       'display': '-webkit-box',
       'max-width': '100%',
-      '-webkit-line-clamp': rowHeightTruncateLines(rowHeight),
+      '-webkit-line-clamp': rowHeight === 6 ? 5 : rowHeightTruncateLines(rowHeight, true),
       '-webkit-box-orient': 'vertical',
       'overflow': 'hidden',
     }"
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 966557ce8f..f324bedd97 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -403,7 +403,7 @@ const isCollaborator = (userIdOrEmail) => {
         :style="{
           'display': '-webkit-box',
           'max-width': '100%',
-          '-webkit-line-clamp': rowHeightTruncateLines(rowHeight),
+          '-webkit-line-clamp': rowHeightTruncateLines(rowHeight, true),
           '-webkit-box-orient': 'vertical',
           'overflow': 'hidden',
         }"
diff --git a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
index 1b302fd17f..cc43827cc9 100644
--- a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
+++ b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
@@ -195,6 +195,8 @@ const onXcResizing = (cn: string | undefined, event: any) => {
 
   const size = event.detail.split('px')[0]
   gridViewCols.value[cn].width = `${normalizedWidth(metaColumnById.value[cn], size)}px`
+
+  refreshFillHandle()
 }
 
 const onXcStartResizing = (cn: string | undefined, event: any) => {
@@ -1434,7 +1436,7 @@ const leftOffset = computed(() => {
 const fillHandleTop = ref()
 const fillHandleLeft = ref()
 
-const refreshFillHandle = () => {
+function refreshFillHandle() {
   const rowIndex = isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row
   const colIndex = isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col
   if (rowIndex !== null && colIndex !== null) {
@@ -1896,7 +1898,7 @@ watch(vSelectedAllRecords, (selectedAll) => {
                   </template>
                 </th>
                 <th
-                  v-if="fields[0] && fields[0].id"
+                  v-if="fields?.[0]?.id"
                   ref="primaryColHeader"
                   v-xc-ver-resize
                   :data-col="fields[0].id"
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index c6748b0775..79c6ec5cba 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1214,6 +1214,8 @@ const onXcResizing = (cn: string | undefined, event: any) => {
 
   const size = event.detail.split('px')[0]
   gridViewCols.value[cn].width = `${normalizedWidth(metaColumnById.value[cn], size)}px`
+
+  refreshFillHandle()
 }
 
 const onXcStartResizing = (cn: string | undefined, event: any) => {
@@ -1376,7 +1378,7 @@ const topOffset = computed(() => {
 const fillHandleTop = ref()
 const fillHandleLeft = ref()
 
-const refreshFillHandle = () => {
+function refreshFillHandle() {
   nextTick(() => {
     const rowIndex = isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row
     const colIndex = isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col
@@ -1834,7 +1836,7 @@ onKeyStroke('ArrowDown', onDown)
                   </div>
                 </th>
                 <th
-                  v-if="fields[0] && fields[0].id"
+                  v-if="fields?.[0]?.id"
                   v-xc-ver-resize
                   :data-col="fields[0].id"
                   :data-title="fields[0].title"
diff --git a/packages/nc-gui/utils/cell.ts b/packages/nc-gui/utils/cell.ts
index 77ce48afe4..8ce559aec3 100644
--- a/packages/nc-gui/utils/cell.ts
+++ b/packages/nc-gui/utils/cell.ts
@@ -107,14 +107,14 @@ export const rowHeightInPx: Record<string, number> = {
   6: 120,
 }
 
-export const rowHeightTruncateLines = (rowHeight?: number) => {
+export const rowHeightTruncateLines = (rowHeight?: number, isSelectOption = false) => {
   switch (rowHeight) {
     case 2:
-      return 3
+      return 2
     case 4:
-      return 4
+      return isSelectOption ? 3 : 4
     case 6:
-      return 6
+      return isSelectOption ? 4 : 6
     default:
       return 1
   }

From f5ece079f7c47258b7e52a533b7e14b6ed9cc01c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:28:44 +0000
Subject: [PATCH 5/5] fix(nc-gui): remove cell padding from text area cell

---
 packages/nc-gui/components/cell/TextArea.vue       |  4 ++--
 .../components/smartsheet/grid/InfiniteTable.vue   | 14 +++++---------
 .../nc-gui/components/smartsheet/grid/Table.vue    | 14 +++++---------
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 4df3a62730..e1e1436b57 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -515,8 +515,8 @@ watch(textAreaRef, (el) => {
         :class="{
           'right-1': isForm,
           'right-0': !isForm,
-          'top-0 ': isGrid && !isExpandedFormOpen && !isForm,
-          '!right-2 ': isGrid && !isExpandedFormOpen && !isForm && ((editEnabled && !isVisible) || isForm),
+          'top-0 right-1': isGrid && !isExpandedFormOpen && !isForm,
+          '!right-2 top-2': isGrid && !isExpandedFormOpen && !isForm && ((editEnabled && !isVisible) || isForm),
           'top-1': !(isGrid && !isExpandedFormOpen && !isForm),
         }"
       >
diff --git a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
index cc43827cc9..f890f554f7 100644
--- a/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
+++ b/packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
@@ -2727,16 +2727,16 @@ watch(vSelectedAllRecords, (selectedAll) => {
     &.align-top {
       @apply py-2;
 
-      &:has(.nc-cell textarea) {
-        @apply pr-0;
+      &:has(.nc-cell.nc-cell-longtext textarea) {
+        @apply py-0 pr-0;
       }
     }
 
     &.align-middle {
       @apply py-0;
 
-      &:has(.nc-cell textarea) {
-        @apply py-2 pr-0;
+      &:has(.nc-cell.nc-cell-longtext textarea) {
+        @apply pr-0;
       }
     }
 
@@ -2760,10 +2760,6 @@ watch(vSelectedAllRecords, (selectedAll) => {
     :deep(.nc-virtual-cell) {
       @apply !text-small;
 
-      textarea {
-        @apply !pr-8;
-      }
-
       .nc-cell-field,
       input,
       textarea {
@@ -2800,7 +2796,7 @@ watch(vSelectedAllRecords, (selectedAll) => {
         @apply leading-[18px];
 
         textarea {
-          @apply pr-2;
+          @apply pr-8 !py-2;
         }
       }
 
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 79c6ec5cba..eb6739065f 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -2742,16 +2742,16 @@ onKeyStroke('ArrowDown', onDown)
     &.align-top {
       @apply py-2;
 
-      &:has(.nc-cell textarea) {
-        @apply pr-0;
+      &:has(.nc-cell.nc-cell-longtext textarea) {
+        @apply py-0 pr-0;
       }
     }
 
     &.align-middle {
       @apply py-0;
 
-      &:has(.nc-cell textarea) {
-        @apply py-2 pr-0;
+      &:has(.nc-cell.nc-cell-longtext textarea) {
+        @apply pr-0;
       }
     }
 
@@ -2775,10 +2775,6 @@ onKeyStroke('ArrowDown', onDown)
     :deep(.nc-virtual-cell) {
       @apply !text-small;
 
-      textarea {
-        @apply !pr-8;
-      }
-
       .nc-cell-field,
       input,
       textarea {
@@ -2815,7 +2811,7 @@ onKeyStroke('ArrowDown', onDown)
         @apply leading-[18px];
 
         textarea {
-          @apply pr-2;
+          @apply pr-8 !py-2;
         }
       }