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( {}} autoFocus />) + expect(screen.getByRole('searchbox', { name: 'common.operation.search' })).toHaveFocus() + }) + it('shows clear button when value is present', () => { const onValueChange = vi.fn() render() 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, 'aria-label'> +} & Pick 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 && (