From 20a2ea3e7ab325a3a05e0ae09a475e2bdece2269 Mon Sep 17 00:00:00 2001
From: "John R. Supplee" <john@supplee.com>
Date: Sun, 28 Mar 2021 02:46:11 +0200
Subject: [PATCH] Add icon to clear the current search

---
 client/components/main/globalSearch.jade | 2 ++
 client/components/main/globalSearch.js   | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/client/components/main/globalSearch.jade b/client/components/main/globalSearch.jade
index 77a976ee8..bd2493124 100644
--- a/client/components/main/globalSearch.jade
+++ b/client/components/main/globalSearch.jade
@@ -32,6 +32,7 @@ template(name="globalSearch")
     .wrapper
       form.global-search-page.js-search-query-form
         input.global-search-query-input(
+          style="{# if hasResults.get #}display: inline-block;{#/if#}"
           id="global-search-input"
           type="text"
           name="searchQuery"
@@ -39,6 +40,7 @@ template(name="globalSearch")
           value="{{ query.get }}"
           autofocus dir="auto"
         )
+        a.js-new-search.fa.fa-eraser
       if searching.get
         +spinner
       else if hasResults.get
diff --git a/client/components/main/globalSearch.js b/client/components/main/globalSearch.js
index 294b3dace..133fa1433 100644
--- a/client/components/main/globalSearch.js
+++ b/client/components/main/globalSearch.js
@@ -249,6 +249,13 @@ class GlobalSearchComponent extends CardSearchPagedComponent {
           );
           document.getElementById('global-search-input').focus();
         },
+        'click .js-new-search'(evt) {
+          evt.preventDefault();
+          const input = document.getElementById('global-search-input');
+          input.value = '';
+          this.query.set('');
+          this.hasResults.set(false);
+        },
       },
     ];
   }