Merge pull request #603 from cagdas001/develop

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

Author: callmekatootie

client/src/components/AddToGroupModal/index.jsx

@@ -155,6 +155,10 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
     setCreatingGroup(false);
   };
 
+  const reset = () => {
+    setFilter("");
+  };
+
   return (
     <Modal
       onCancel={onCancel}
@@ -175,6 +179,16 @@ export default function AddToGroupModal({ onCancel, updateUser, user }) {
             value={filter}
             disabled={loadingGroups}
           />
+          <span
+            className={
+              filter.length > 0
+                ? `${style.resetKeyword}`
+                : `${style.resetKeyword} ${style.resetKeywordHidden}`
+            }
+            onClick={() => reset()}
+          >
+            &times;
+          </span>
           <Button
             className={style.createButton}
             onClick={createGroup}

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

@@ -63,6 +63,12 @@
   &::placeholder {
     opacity: 0.5;
   }
+
+  &::-ms-clear {
+    display: none;
+    height: 0;
+    width: 0;
+  }
 }
 
 .searchRow {
@@ -92,3 +98,24 @@
   font: 400 12pt/1.25 Inter;
   margin-left: 30px;
 }
+
+.resetKeyword {
+  position: absolute;
+  left: 67.5%;
+  top: 10px;
+  appearance: none;
+  border: none;
+  color: $textColor;
+  cursor: pointer;
+  font-size: 24px;
+  font-family: Arial;
+  outline: none;
+
+  &:hover {
+    color: $red;
+  }
+
+  &.resetKeywordHidden {
+    visibility: hidden;
+  }
+}

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,29 @@
   width: 20px;
   height: 20px;
 }
+
+// firefox solution to vertically align .resetKeyword
+@supports (-moz-appearance: none) {
+  .resetKeyword {
+    align-self: center;
+  }
+}
+
+.resetKeyword {
+  order: 2;
+  appearance: none;
+  border: none;
+  color: $textColor;
+  cursor: pointer;
+  font-size: 24px;
+  font-family: Arial;
+  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,41 @@
 
   font-family: Helvetica;
   font-size: 16px;
+  &::-ms-clear {
+    display: none;
+    height: 0;
+    width: 0;
+  }
 }
 
 .searchboxInput:focus,
 .searchboxInput:focus,
 .searchboxInput:focus {
   outline: none;
 }
+
+// firefox solution to vertically align .resetKeyword
+@supports (-moz-appearance: none) {
+  .resetKeyword {
+    align-self: center;
+  }
+}
+
+.resetKeyword {
+  order: 2;
+  appearance: none;
+  border: none;
+  color: $textColor;
+  cursor: pointer;
+  font-size: 24px;
+  font-family: Arial;
+  outline: none;
+
+  &:hover {
+    color: $red;
+  }
+
+  &.resetKeywordHidden {
+    visibility: hidden;
+  }
+}