AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 15:48:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: dataset search-input compostion can't work in chrome (#11907)

Browse Source 
Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com>
This commit is contained in:
zhu-an 2024-12-21 11:26:17 +08:00 committed by GitHub
parent f53741c5b9
commit 6ded06c6d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@ const SearchInput: FC<SearchInputProps> = ({
const { t } = useTranslation() const { t } = useTranslation()
const [focus, setFocus] = useState<boolean>(false) const [focus, setFocus] = useState<boolean>(false)
const isComposing = useRef<boolean>(false) const isComposing = useRef<boolean>(false)
const [internalValue, setInternalValue] = useState<string>(value)
return ( return (
<div className={cn( <div className={cn(
@ -45,16 +46,18 @@ const SearchInput: FC<SearchInputProps> = ({
white && '!bg-white hover:!bg-white group-hover:!bg-white placeholder:!text-gray-400', white && '!bg-white hover:!bg-white group-hover:!bg-white placeholder:!text-gray-400',
)} )}
placeholder={placeholder || t('common.operation.search')!} placeholder={placeholder || t('common.operation.search')!}
value={value} value={internalValue}
onChange={(e) => { onChange={(e) => {
setInternalValue(e.target.value)
if (!isComposing.current) if (!isComposing.current)
onChange(e.target.value) onChange(e.target.value)
}} }}
onCompositionStart={() => { onCompositionStart={() => {
isComposing.current = true isComposing.current = true
}} }}
onCompositionEnd={() => { onCompositionEnd={(e) => {
isComposing.current = false isComposing.current = false
onChange(e.data)
}} }}
onFocus={() => setFocus(true)} onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)} onBlur={() => setFocus(false)}
@ -63,7 +66,10 @@ const SearchInput: FC<SearchInputProps> = ({
{value && ( {value && (
<div <div
className='shrink-0 flex items-center justify-center w-4 h-4 cursor-pointer group/clear' className='shrink-0 flex items-center justify-center w-4 h-4 cursor-pointer group/clear'
onClick={() => onChange('')} onClick={() => {
onChange('')
setInternalValue('')
}}
> >
<XCircle className='w-3.5 h-3.5 text-gray-400 group-hover/clear:text-gray-600' /> <XCircle className='w-3.5 h-3.5 text-gray-400 group-hover/clear:text-gray-600' />
</div> </div>