diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index fe92a5d092..a2752373f1 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -20,6 +20,7 @@ const SearchInput: FC<SearchInputProps> = ({
   white,
 }) => {
   const { t } = useTranslation()
+  const inputRef = useRef<HTMLInputElement>(null)
   const [focus, setFocus] = useState<boolean>(false)
   const isComposing = useRef<boolean>(false)
   const [compositionValue, setCompositionValue] = useState<string>('')
@@ -36,6 +37,7 @@ const SearchInput: FC<SearchInputProps> = ({
         <RiSearchLine className="h-4 w-4 text-components-input-text-placeholder" aria-hidden="true" />
       </div>
       <input
+        ref={inputRef}
         type="text"
         name="query"
         className={cn(
@@ -65,14 +67,17 @@ const SearchInput: FC<SearchInputProps> = ({
         autoComplete="off"
       />
       {value && (
-        <div
-          className="group/clear flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center"
+        <button
+          type="button"
+          aria-label={t('operation.clear', { ns: 'common' })}
+          className="group/clear flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0"
           onClick={() => {
             onChange('')
+            inputRef.current?.focus()
           }}
         >
           <RiCloseCircleFill className="h-4 w-4 text-text-quaternary group-hover/clear:text-text-tertiary" />
-        </div>
+        </button>
       )}
     </div>
   )