Merge pull request #7623 from nocodb/nc-fix/focus-search-field-add-new-record-modal

Nc fix(nc-gui): auto focus the search field in the 'Add New Link' form

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -41,6 +41,8 @@ const injectedColumn = inject(ColumnInj, ref())
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const filterQueryRef = ref<HTMLInputElement>()
+
 const { isSharedBase } = storeToRefs(useBase())
 
 const {
@@ -92,8 +94,6 @@ const attachmentCol = computedInject(FieldsInj, (_fields) => {
   return (relatedTableMeta.value.columns ?? []).filter((col) => isAttachment(col))[0]
 })
 
-const isFocused = ref(false)
-
 const fields = computedInject(FieldsInj, (_fields) => {
   return (relatedTableMeta.value.columns ?? [])
     .filter((col) => !isSystemColumn(col) && !isPrimary(col) && !isLinksOrLTAR(col) && !isAttachment(col))
@@ -175,6 +175,12 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
     linkRow(rowRef, parseInt(id))
   }
 }
+
+watch([filterQueryRef, isDataExist], () => {
+  if (readOnly.value || isPublic.value ? isDataExist.value : true) {
+    filterQueryRef.value?.focus()
+  }
+})
 </script>
 
 <template>
@@ -198,11 +204,8 @@ 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"
-        :class="{ '!border-primary': childrenListPagination.query.length !== 0 || isFocused }"
-      >
-        <MdiMagnify class="w-5 h-5 ml-2" />
+      <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="filterQueryRef"
           v-model:value="childrenListPagination.query"
@@ -210,9 +213,13 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
           class="w-full !sm:rounded-md xs:min-h-8 !xs:rounded-xl"
           size="small"
           :bordered="false"
-          @focus="isFocused = true"
-          @blur="isFocused = false"
-          @keydown.capture.stop
+          @keydown.capture.stop="
+            (e) => {
+              if (e.key === 'Escape') {
+                filterQueryRef?.blur()
+              }
+            }
+          "
           @change="childrenListPagination.page = 1"
         >
         </a-input>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -27,7 +27,7 @@ const injectedColumn = inject(ColumnInj)
 
 const { isSharedBase } = storeToRefs(useBase())
 
-const filterQueryRef = ref()
+const filterQueryRef = ref<HTMLInputElement>()
 
 const { t } = useI18n()
 
@@ -64,8 +64,6 @@ const isForm = inject(IsFormInj, ref(false))
 
 const saveRow = inject(SaveRowInj, () => {})
 
-const isFocused = ref(false)
-
 const linkRow = async (row: Record<string, any>, id: number) => {
   if (isNew.value) {
     addLTARRef(row, injectedColumn?.value as ColumnType)
@@ -171,6 +169,10 @@ watch(expandedFormDlg, () => {
   }
 })
 
+watch(filterQueryRef, () => {
+  filterQueryRef.value?.focus()
+})
+
 onKeyStroke('Escape', () => {
   vModel.value = false
 })
@@ -240,10 +242,7 @@ 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"
-        :class="{ '!border-primary': childrenExcludedListPagination.query.length !== 0 || isFocused }"
-      >
+      <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="filterQueryRef"
@@ -252,9 +251,13 @@ const onCreatedRecord = (record: any) => {
           class="w-full !rounded-md nc-excluded-search xs:min-h-8"
           size="small"
           :bordered="false"
-          @focus="isFocused = true"
-          @blur="isFocused = false"
-          @keydown.capture.stop
+          @keydown.capture.stop="
+            (e) => {
+              if (e.key === 'Escape') {
+                filterQueryRef?.blur()
+              }
+            }
+          "
           @change="childrenExcludedListPagination.page = 1"
         >
         </a-input>