From 499729c0191f590c4d5ddbe40cded63f10eee071 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 2 Mar 2022 11:28:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/NEXT/components/SearchInput.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/themes/NEXT/components/SearchInput.js b/themes/NEXT/components/SearchInput.js
index 73aa521b..2b4e88be 100644
--- a/themes/NEXT/components/SearchInput.js
+++ b/themes/NEXT/components/SearchInput.js
@@ -36,10 +36,17 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
   }
   const cleanSearch = () => {
     searchInputRef.current.value = ''
+    setShowClean(false)
   }
 
+  const [showClean, setShowClean] = useState(false)
   const updateSearchKey = (val) => {
     searchInputRef.current.value = val
+    if (val) {
+      setShowClean(true)
+    } else {
+      setShowClean(false)
+    }
   }
 
   return <div className='flex border dark:border-gray-600 w-full bg-gray-100 dark:bg-gray-900'>
@@ -52,7 +59,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
       onChange={e => updateSearchKey(e.target.value)}
       defaultValue={currentSearch}
     />
-    {(currentSearch && currentSearch.length > 0 && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
+    {(showClean && <i className='fas fa-times text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
 
     <div className='p-3 bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center items-center cursor-pointer'
       onClick={handleSearch}>