From 13fe8b4dc0023a1087e50944634c3c885170d16d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 15 Feb 2024 04:51:25 +0000
Subject: [PATCH] fix: link record expanded form auto focus issue on clicking
 link items

---
 .../components/ListChildItems.vue             | 26 ++++++++++---------
 .../virtual-cell/components/ListItems.vue     | 13 ++++++----
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index eaee8cb587..83c486ab10 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { VNodeRef } from '@vue/runtime-core'
 import { type ColumnType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import type { Row } from '#imports'
 import InboxIcon from '~icons/nc-icons/inbox'
@@ -42,6 +41,8 @@ const injectedColumn = inject(ColumnInj, ref())
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const filterQueryRef = ref()
+
 const { isSharedBase } = storeToRefs(useBase())
 
 const {
@@ -63,15 +64,6 @@ const {
 
 const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow()
 
-const colTitle = computed(() => injectedColumn.value?.title || '')
-
-const isDataExist = computed<boolean>(() => {
-  return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
-})
-
-const filterQueryFocus: VNodeRef = (el) =>
-  vModel.value && (isPublic.value || readOnly.value ? isDataExist.value : true) && (el as HTMLInputElement)?.focus()
-
 watch(
   [vModel, isForm],
   (nextVal) => {
@@ -112,6 +104,8 @@ const expandedFormDlg = ref(false)
 
 const expandedFormRow = ref({})
 
+const colTitle = computed(() => injectedColumn.value?.title || '')
+
 const onClick = (row: Row) => {
   if (readOnly.value) return
   expandedFormRow.value = row
@@ -135,6 +129,10 @@ watch(expandedFormDlg, () => {
   }
 })
 
+watch(filterQueryRef, () => {
+  filterQueryRef.value?.focus()
+})
+
 onKeyStroke('Escape', () => {
   vModel.value = false
 })
@@ -166,6 +164,10 @@ const totalItemsToShow = computed(() => {
   return childrenListCount.value
 })
 
+const isDataExist = computed<boolean>(() => {
+  return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
+})
+
 const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
   if (isSharedBase.value) return
   if (readOnly.value) return
@@ -200,10 +202,10 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
       :display-value="headerDisplayValue"
     />
     <div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
-      <div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 focus-within:!border-primary">
+      <div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 !focus-within:border-primary">
         <MdiMagnify class="w-5 h-5 ml-2 text-gray-500" />
         <a-input
-          :ref="filterQueryFocus"
+          ref="filterQueryRef"
           v-model:value="childrenListPagination.query"
           :placeholder="`Search in ${relatedTableMeta?.title}`"
           class="w-full !sm:rounded-md xs:min-h-8 !xs:rounded-xl"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 83a77df93f..4c55f4a2e2 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { VNodeRef } from '@vue/runtime-core'
 import { RelationTypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import InboxIcon from '~icons/nc-icons/inbox'
@@ -28,6 +27,8 @@ const injectedColumn = inject(ColumnInj)
 
 const { isSharedBase } = storeToRefs(useBase())
 
+const filterQueryRef = ref()
+
 const { t } = useI18n()
 
 const { $e } = useNuxtApp()
@@ -63,8 +64,6 @@ const isForm = inject(IsFormInj, ref(false))
 
 const saveRow = inject(SaveRowInj, () => {})
 
-const filterQueryFocus: VNodeRef = (el) => vModel.value && (el as HTMLInputElement)?.focus()
-
 const linkRow = async (row: Record<string, any>, id: number) => {
   if (isNew.value) {
     addLTARRef(row, injectedColumn?.value as ColumnType)
@@ -170,6 +169,10 @@ watch(expandedFormDlg, () => {
   }
 })
 
+watch(filterQueryRef, () => {
+  filterQueryRef.value?.focus()
+})
+
 onKeyStroke('Escape', () => {
   vModel.value = false
 })
@@ -239,10 +242,10 @@ const onCreatedRecord = (record: any) => {
       :header="$t('activity.addNewLink')"
     />
     <div class="flex mt-2 mb-2 items-center gap-2">
-      <div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 focus-within:!border-primary">
+      <div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 !focus-within:border-primary">
         <MdiMagnify class="w-5 h-5 ml-2 text-gray-500" />
         <a-input
-          :ref="filterQueryFocus"
+          ref="filterQueryRef"
           v-model:value="childrenExcludedListPagination.query"
           :placeholder="`${$t('general.searchIn')} ${relatedTableMeta?.title}`"
           class="w-full !rounded-md nc-excluded-search xs:min-h-8"