From a7becbc875b7ba3ab7044292881e18db019713a2 Mon Sep 17 00:00:00 2001
From: sandymcfadden <sandy.mcfadden@automattic.com>
Date: Wed, 28 Apr 2021 08:55:17 -0300
Subject: [PATCH] Fix/hide clear search button (#2862)

Fixes #2860

Currently, the X icon in the search field, used to clear the search term, is always present. It should only show when there is a search term to clear. This fixes that.
---
 RELEASE-NOTES.md           |  1 +
 lib/search-field/index.tsx | 17 +++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index b7d0d8a27..e1a0b2ac6 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -18,6 +18,7 @@
 - Fixed spacing on unsynced notes warning message [#2797](https://github.com/automattic/simplenote-electron/pull/2797)
 - Fixed cut off issue for dialogs when the window is too small [#2815](https://github.com/automattic/simplenote-electron/pull/2815), [#2834](https://github.com/automattic/simplenote-electron/pull/2834), [#2863](https://github.com/automattic/simplenote-electron/pull/2863)
 - Fixed unnecessary separators in the Electron builds File and Edit menus when not yet logged in (props @Klauswk) [#2724](https://github.com/automattic/simplenote-electron/pull/2724)
+- Fixed the clear search button so it does not appear unless there is a search term to clear [#2862](https://github.com/automattic/simplenote-electron/pull/2862)
 
 ## [v2.9.0]
 
diff --git a/lib/search-field/index.tsx b/lib/search-field/index.tsx
index 1fb10aed5..e0945c100 100644
--- a/lib/search-field/index.tsx
+++ b/lib/search-field/index.tsx
@@ -95,14 +95,15 @@ export class SearchField extends Component<Props> {
           value={searchQuery}
           spellCheck={false}
         />
-        <button
-          aria-label="Clear search"
-          className="icon-button"
-          hidden={!hasQuery}
-          onClick={this.clearQuery}
-        >
-          <SmallCrossIcon />
-        </button>
+        {hasQuery && (
+          <button
+            aria-label="Clear search"
+            className="icon-button"
+            onClick={this.clearQuery}
+          >
+            <SmallCrossIcon />
+          </button>
+        )}
       </div>
     );
   }