docs: search input default focus (#19724)

* docs: search input default focus

* fix(docs): ensure search input is focused after component mounts

* revert: update

* Update docs/.vitepress/vitepress/components/globals/overview.vue

Co-authored-by: qiang <qw13131wang@gmail.com>

* Update docs/.vitepress/vitepress/components/globals/overview.vue

Co-authored-by: qiang <qw13131wang@gmail.com>

* docs: update

---------

Co-authored-by: qiang <qw13131wang@gmail.com>

docs/.vitepress/vitepress/components/globals/overview.vue

@@ -2,6 +2,7 @@
   <div class="overview-container">
     <div class="search-content">
       <el-input
+        ref="searchRef"
         v-model="query"
         :prefix-icon="Search"
         size="large"
@@ -66,10 +67,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter } from 'vitepress'
 import { Search } from '@element-plus/icons-vue'
 import overviewLocale from '../../../i18n/component/overview.json'
+import type { InputInstance } from 'element-plus'
 import { useSidebar } from '~/composables/sidebar'
 import { useLang } from '~/composables/lang'
 import overviewIcons from '~/components/overview-icons'
@@ -79,7 +81,7 @@ const router = useRouter()
 const { sidebars } = useSidebar()
 
 const query = ref('')
-
+const searchRef = ref<InputInstance>()
 const locale = computed(() => overviewLocale[lang.value])
 const filteredSidebars = computed(() =>
   sidebars.value
@@ -106,6 +108,12 @@ const getIcon = (link: string) => {
   const name = link.split('/').pop()
   return name ? overviewIcons[name] : null
 }
+
+onMounted(() => {
+  nextTick(() => {
+    searchRef.value?.focus()
+  })
+})
 </script>
 
 <style scoped lang="scss">