From 6ded06c6d96678c8499d0d20e51de68964bbfff6 Mon Sep 17 00:00:00 2001
From: zhu-an <70234959+xhdd123321@users.noreply.github.com>
Date: Sat, 21 Dec 2024 11:26:17 +0800
Subject: [PATCH] fix: dataset search-input compostion can't work in chrome
 (#11907)

Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com>
---
 web/app/components/base/search-input/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index 89345fbe3282d3..556a7bdf49296a 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -23,6 +23,7 @@ const SearchInput: FC<SearchInputProps> = ({
   const { t } = useTranslation()
   const [focus, setFocus] = useState<boolean>(false)
   const isComposing = useRef<boolean>(false)
+  const [internalValue, setInternalValue] = useState<string>(value)
 
   return (
     <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',
         )}
         placeholder={placeholder || t('common.operation.search')!}
-        value={value}
+        value={internalValue}
         onChange={(e) => {
+          setInternalValue(e.target.value)
           if (!isComposing.current)
             onChange(e.target.value)
         }}
         onCompositionStart={() => {
           isComposing.current = true
         }}
-        onCompositionEnd={() => {
+        onCompositionEnd={(e) => {
           isComposing.current = false
+          onChange(e.data)
         }}
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
@@ -63,7 +66,10 @@ const SearchInput: FC<SearchInputProps> = ({
       {value && (
         <div
           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' />
         </div>