From 1d7521f8ed968d43f8c9c83d7c4228754ee373bd Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Mon, 23 Dec 2024 11:27:20 +0800
Subject: [PATCH] change search box click x to clear search value (#7233)

---
 frontend/src/components/search/search.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index 701c50c636..57f91b58b0 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -520,6 +520,17 @@ class Search extends Component {
     });
   }
 
+  onClearSearch = () => {
+    this.setState({
+      value: '',
+      inputValue: '',
+      isResultGotten: false,
+      resultItems: [],
+      highlightIndex: 0,
+      isSearchInputShow: false,
+    });
+  }
+
   renderSearchResult() {
     const { resultItems, width, showRecent, isResultGotten, isLoading } = this.state;
     if (!width || width === 'default') return null;
@@ -746,8 +757,8 @@ class Search extends Component {
                   <button
                     type="button"
                     className="search-icon-right input-icon-addon sf3-font sf3-font-x-01"
-                    onClick={this.onCloseHandler}
-                    aria-label={gettext('Close')}
+                    onClick={this.onClearSearch}
+                    aria-label={gettext('Clear search')}
                   ></button>
                 }
               </div>
@@ -785,8 +796,8 @@ class Search extends Component {
                     <button
                       type="button"
                       className="search-icon-right input-icon-addon sf3-font sf3-font-x-01"
-                      onClick={this.onCloseHandler}
-                      aria-label={gettext('Close')}
+                      onClick={this.onClearSearch}
+                      aria-label={gettext('Clear search')}
                     ></button>
                   }
                 </div>