From d0b376d31afb8b2e0810a675c8f822c9c5d14215 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 8 Jun 2026 15:40:09 +0800
Subject: [PATCH] feat(web): support search input autofocus (#37175)

---
 .../components/base/search-input/__tests__/index.spec.tsx   | 5 +++++
 web/app/components/base/search-input/index.tsx              | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/search-input/__tests__/index.spec.tsx b/web/app/components/base/search-input/__tests__/index.spec.tsx
index 6656b1fb43..9db43d074f 100644
--- a/web/app/components/base/search-input/__tests__/index.spec.tsx
+++ b/web/app/components/base/search-input/__tests__/index.spec.tsx
@@ -23,6 +23,11 @@ describe('SearchInput', () => {
       expect(screen.getByRole('searchbox', { name: 'Search providers' })).toBeInTheDocument()
     })
 
+    it('focuses the searchbox when autoFocus is enabled', () => {
+      render(<SearchInput value="" onValueChange={() => {}} autoFocus />)
+      expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toHaveFocus()
+    })
+
     it('shows clear button when value is present', () => {
       const onValueChange = vi.fn()
       render(<SearchInput value="has value" onValueChange={onValueChange} />)
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index eccb8377a8..4682dd936f 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react'
+import type { InputProps } from '@langgenius/dify-ui/input'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Input } from '@langgenius/dify-ui/input'
 import { useRef, useState } from 'react'
@@ -9,13 +9,14 @@ type SearchInputProps = {
   onValueChange: (value: string) => void
   placeholder?: string
   className?: string
-} & Pick<ComponentProps<'input'>, 'aria-label'>
+} & Pick<InputProps, 'aria-label' | 'autoFocus'>
 
 export function SearchInput({
   placeholder,
   className,
   value,
   onValueChange,
+  autoFocus,
   'aria-label': ariaLabel,
 }: SearchInputProps) {
   const { t } = useTranslation()
@@ -83,6 +84,7 @@ export function SearchInput({
           onValueChange(e.currentTarget.value)
         }}
         autoComplete="off"
+        autoFocus={autoFocus}
         enterKeyHint="search"
       />
       {!!inputValue && (