From c7308a2909f6042b7034b9cd24cce5a80ab37bff Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 24 Aug 2019 16:42:39 +0100
Subject: [PATCH] Allows cancel of filter by pressing Esc key, or the Clear
 icon in search field

---
 src/components/FilterTile.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
index fc4922d7..1c81bc8e 100644
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@@ -6,7 +6,12 @@
         id="filter-tiles"
         v-model="input"
         placeholder="Start typing to filter tiles..."
-        v-on:input="userIsTypingSomething" />
+        v-on:input="userIsTypingSomething"
+        @keydown.esc="clearFilterInput" />
+        <i v-if="input.length > 0"
+          class="el-icon-circle-close clear-search"
+          title="Clear search"
+          @click="clearFilterInput"></i>
       </form>
       <div class="space-filler"></div>
   </section>
@@ -24,6 +29,11 @@ export default {
   methods: {
     userIsTypingSomething () {
       this.$emit('user-is-searchin', this.input)
+    },
+    clearFilterInput () {
+      console.log('Esc key pressed')
+      this.input = ''
+      this.userIsTypingSomething()
     }
   }
 }
@@ -65,6 +75,18 @@ export default {
         background: #607d8b4a;
       }
     }
+    .clear-search {
+      position: absolute;
+      margin: 1em 0 0 -2em;
+      color: #1CA8DD;
+      opacity: 0.5;
+      border-radius: 50px;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+        background: #282a32;
+      }
+    }
   }
   .space-filler {
     flex: 1;