Clear Icon added for search input

README.md

@@ -80,6 +80,7 @@ export default Example;
 | `className`           | class name for parent component                        | `string`                     | `multi-select` |
 | `valueRenderer`       | custom dropdown header [docs](#-custom-value-renderer) | `function`                   |                |
 | `ItemRenderer`        | custom dropdown option [docs](#-custom-item-renderer)  | `function`                   |                |
+| `ClearIcon`           | Custom Clear Icon for Search                           | `string|function`            |                |
 
 ## 🔍 Custom filter logic
 
@@ -106,7 +107,8 @@ default values for `overrideStrings` are as below
   "selectSomeItems": "Select...",
   "allItemsAreSelected": "All items are selected.",
   "selectAll": "Select All",
-  "search": "Search"
+  "search": "Search",
+  "clearSearch": "Clear Search"
 }
 ```
 

src/lib/get-string.tsx

@@ -3,6 +3,7 @@ const strings = {
   allItemsAreSelected: "All items are selected.",
   selectAll: "Select All",
   search: "Search",
+  clearSearch: "Clear Search",
 };
 
 export default function getString(key: string, overrideStrings?): string {

src/lib/interfaces.ts

@@ -34,4 +34,5 @@ export interface ISelectProps {
   labelledBy: string;
   className?: string;
   onMenuToggle?;
+  ClearIcon?: string | Function;
 }

src/multi-select/index.tsx

@@ -45,6 +45,7 @@ const MultiSelect = ({
   filterOptions,
   labelledBy,
   onMenuToggle,
+  ClearIcon,
 }: ISelectProps) => {
   const nvalue = value || [];
   return (
@@ -65,6 +66,7 @@ const MultiSelect = ({
           focusSearchOnOpen,
           filterOptions,
           overrideStrings,
+          ClearIcon,
         }}
         disabled={disabled}
         labelledBy={labelledBy}

src/select-panel/cross.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Cross = () => (
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    className="dropdown-search-clear-icon gray"
+  >
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+);
+
+export default Cross;

src/select-panel/index.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useState } from "react";
 import { filterOptions } from "../lib/fuzzy-match-utils";
 import getString from "../lib/get-string";
 import { Option } from "../lib/interfaces";
+import Cross from "./cross";
 import SelectItem from "./select-item";
 import SelectList from "./select-list";
 
@@ -24,6 +25,7 @@ interface ISelectPanelProps {
   hasSelectAll: boolean;
   filterOptions?: (options: Option[], filter: string) => Option[];
   overrideStrings?: { [key: string]: string };
+  ClearIcon?;
 }
 
 enum FocusType {
@@ -33,6 +35,7 @@ enum FocusType {
 
 const SelectSearchContainer = css({
   width: "100%",
+  position: "relative",
   borderBottom: "1px solid var(--rmsc-border)",
   input: {
     height: "var(--rmsc-h)",
@@ -43,6 +46,20 @@ const SelectSearchContainer = css({
   },
 });
 
+const SearchClearButton = css({
+  cursor: "pointer",
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  background: "none",
+  border: 0,
+  padding: "0 calc(var(--rmsc-p)/2)",
+  "[hidden]": {
+    display: "none",
+  },
+});
+
 export const SelectPanel = (props: ISelectPanelProps) => {
   const {
     onChange,
@@ -56,6 +73,7 @@ export const SelectPanel = (props: ISelectPanelProps) => {
     focusSearchOnOpen,
     hasSelectAll,
     overrideStrings,
+    ClearIcon,
   } = props;
   const [searchText, setSearchText] = useState("");
   const [focusIndex, setFocusIndex] = useState(
@@ -93,6 +111,8 @@ export const SelectPanel = (props: ISelectPanelProps) => {
     setFocusIndex(FocusType.SEARCH);
   };
 
+  const handleClear = () => setSearchText("");
+
   const handleItemClicked = (index: number) => setFocusIndex(index);
 
   const handleKeyDown = (e) => {
@@ -139,11 +159,20 @@ export const SelectPanel = (props: ISelectPanelProps) => {
           <input
             autoFocus={focusSearchOnOpen}
             placeholder={getString("search", overrideStrings)}
-            type="search"
+            type="text"
             aria-describedby={getString("search", overrideStrings)}
             onChange={handleSearchChange}
             onFocus={handleSearchFocus}
+            value={searchText}
           />
+          <button
+            className={`${SearchClearButton} search-clear-button`}
+            hidden={!searchText}
+            onClick={handleClear}
+            aria-label={getString("clearSearch", overrideStrings)}
+          >
+            {ClearIcon || <Cross />}
+          </button>
         </div>
       )}