From 55924b2666750089e819874dc0120986a822e541 Mon Sep 17 00:00:00 2001
From: Manish Devgan <manish.nsit8@gmail.com>
Date: Sat, 21 Jul 2018 02:45:53 +0530
Subject: [PATCH] Adds Cancel Button to Filter

Cancel button clears out the filter and calls the onChange function to trigger the event.

Cheers!
---
 src/components/changesetFilter.jsx | 12 +++++++++---
 src/style.css                      |  4 ++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/changesetFilter.jsx b/src/components/changesetFilter.jsx
index 8303ba7a..3b2517a7 100644
--- a/src/components/changesetFilter.jsx
+++ b/src/components/changesetFilter.jsx
@@ -1,19 +1,25 @@
 import FilterIcon from 'mdi-react/FilterIcon';
+import CloseCircleIcon from 'mdi-react/CloseCircleIcon';
 
 const changesetFilter = ({ value, onChange }) => (
   <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-    <form style={{ margin: '0em 0em 1em 3.5em' }}>
+    <form style={{ margin: '0em 0em 1em 3.5em' }} className={!value ? 'empty' : ''}>
       <span>Filter by description:&nbsp;</span>
       <input
         id="descriptionFilterField"
         type="text"
         value={value}
         onChange={event => onChange(event)}
-        onBlur={(event) => {
+      />
+      <button
+        style={{ height: '2em' }}
+        onClick={(event) => {
           document.getElementById('descriptionFilterField').value = '';
           onChange(event);
         }}
-      />
+      >
+        <CloseCircleIcon />
+      </button>
     </form>
     <button
       style={{ height: '2em' }}
diff --git a/src/style.css b/src/style.css
index 0bf99aaa..59c14e8c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -158,10 +158,10 @@ tr.changeset td{
 	vertical-align: middle;
 }
 
-form:not(:focus-within) {
+form.empty:not(:focus-within) {
 	opacity: 0;
 }
-form:focus-within + button {
+form:not(.empty) + button, form:focus-within + button {
 	display: none;
 }