opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-10 18:24:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): support search input autofocus (#37175)

Browse Source
This commit is contained in:
yyh 2026-06-08 15:40:09 +08:00 committed by GitHub
parent 9c24b7bac5
commit d0b376d31a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/base/search-input/__tests__/index.spec.tsx
View File

@ -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} />)

6
web/app/components/base/search-input/index.tsx
View File

@ -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 && (