From e544119aa30a534402ca98f139432dfe1205b100 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=97=E5=A4=A7?= <ufo025174@gmail.com>
Date: Fri, 2 Aug 2024 21:56:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=85=A8=E5=B1=80=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86=E6=89=93=E5=BC=80=E5=90=8E=E8=87=AA=E5=8A=A8=E8=81=9A?=
 =?UTF-8?q?=E7=84=A6=E8=BE=93=E5=85=A5=E6=A1=86=20(#4006)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/widgets/global-search/global-search.vue        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/effects/layouts/src/widgets/global-search/global-search.vue b/packages/effects/layouts/src/widgets/global-search/global-search.vue
index bbc3fe71..c0dbc702 100644
--- a/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MenuRecordRaw } from '@vben/types';
 
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import {
   ArrowDown,
@@ -40,6 +40,7 @@ const props = withDefaults(
 
 const [open, toggleOpen] = useToggle();
 const keyword = ref('');
+const searchInputRef = ref<HTMLInputElement>();
 
 function handleClose() {
   open.value = false;
@@ -54,6 +55,12 @@ whenever(cmd, () => {
   }
 });
 
+whenever(open, () => {
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+});
+
 const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
   if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
     event.preventDefault();
@@ -115,6 +122,7 @@ onMounted(() => {
           >
             <Search class="text-muted-foreground size-4" />
             <input
+              ref="searchInputRef"
               v-model="keyword"
               :placeholder="$t('widgets.search.searchNavigate')"
               class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"