feat(search-boxes): add clear button for inputs

Add clear/reset button for the searchBox component input.
Add clear/reset button for the SuggestionBox component input.

Addresses #161

Author: cagdas001

client/src/components/SuggestionBox/index.jsx

@@ -24,11 +24,22 @@ const renderSuggestion = (suggestion) => (
 /**
  * Styles the input field for the suggestion input
  * @param {Object} inputProps The input props
+ * @param {Function} reset resets the input
  */
-const renderInputComponent = (inputProps) => (
+const renderInputComponent = (inputProps, reset) => (
   <div className={style.searchbox}>
     <i className={style.searchboxIcon}></i>
     <input {...inputProps} />
+    <span
+      className={
+        inputProps.value.length > 0
+          ? `${style.resetKeyword}`
+          : `${style.resetKeyword} ${style.resetKeywordHidden}`
+      }
+      onClick={() => reset()}
+    >
+      &times;
+    </span>
   </div>
 );
 
@@ -120,6 +131,10 @@ export default function SuggestionBox({
     onChange,
   };
 
+  const reset = () => {
+    setValue("");
+  };
+
   return (
     <Autosuggest
       suggestions={suggestions}
@@ -130,7 +145,9 @@ export default function SuggestionBox({
       renderSuggestion={renderSuggestion}
       inputProps={inputProps}
       theme={style}
-      renderInputComponent={renderInputComponent}
+      renderInputComponent={(inputProps) =>
+        renderInputComponent(inputProps, reset)
+      }
     />
   );
 }

client/src/components/SuggestionBox/style.module.scss

@@ -19,6 +19,11 @@
   margin-left: 12px;
   margin-top: 1px;
   width: 100%;
+  &::-ms-clear {
+    display: none;
+    height: 0;
+    width: 0;
+  }
 }
 
 .inputOpen {
@@ -91,3 +96,21 @@
   width: 20px;
   height: 20px;
 }
+
+.resetKeyword {
+  order: 2;
+  appearance: none;
+  border: none;
+  color: $textColor;
+  cursor: pointer;
+  font-size: 24px;
+  outline: none;
+
+  &:hover {
+    color: $red;
+  }
+
+  &.resetKeywordHidden {
+    visibility: hidden;
+  }
+}

client/src/components/searchBox/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PT from "prop-types";
-import styles from "./searchBox.module.css";
+import styles from "./searchBox.module.scss";
 
 /**
  * Searchbox
@@ -26,6 +26,11 @@ export default function SearchBox({
     }
   };
 
+  const reset = () => {
+    setQuery("");
+    onChange && onChange("");
+  };
+
   return (
     <div className={styles.searchbox}>
       <div className={styles.searchboxItems}>
@@ -38,6 +43,16 @@ export default function SearchBox({
           onChange={handleChange}
           disabled={disabled}
         />
+        <span
+          className={
+            query.length > 0
+              ? `${styles.resetKeyword}`
+              : `${styles.resetKeyword} ${styles.resetKeywordHidden}`
+          }
+          onClick={() => reset()}
+        >
+          &times;
+        </span>
       </div>
     </div>
   );

client/src/components/searchBox/searchBox.module.css renamed to client/src/components/searchBox/searchBox.module.scss

@@ -1,4 +1,5 @@
 /* importing colors */
+@import "../../styles/mixins";
 @value colors: "../../styles/colors.module.css";
 @value lightGray from colors;
 
@@ -47,10 +48,33 @@
 
   font-family: Helvetica;
   font-size: 16px;
+  &::-ms-clear {
+    display: none;
+    height: 0;
+    width: 0;
+  }
 }
 
 .searchboxInput:focus,
 .searchboxInput:focus,
 .searchboxInput:focus {
   outline: none;
 }
+
+.resetKeyword {
+  order: 2;
+  appearance: none;
+  border: none;
+  color: $textColor;
+  cursor: pointer;
+  font-size: 24px;
+  outline: none;
+
+  &:hover {
+    color: $red;
+  }
+
+  &.resetKeywordHidden {
+    visibility: hidden;
+  }
+}