From 63c53b57ffe4f579b6194796306396ca873a1045 Mon Sep 17 00:00:00 2001
From: Harsh Zalavadiya <harshzalavadiya@users.noreply.github.com>
Date: Wed, 24 Mar 2021 07:08:57 +0000
Subject: [PATCH] fix: :bug: clear selected icon + on search clear

---
 src/lib/interfaces.ts            |  4 ++--
 src/select-panel/index.tsx       | 11 ++++++++++-
 stories/custom-arrow.stories.tsx |  4 ++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
index 44a83f3..4633903 100644
--- a/src/lib/interfaces.ts
+++ b/src/lib/interfaces.ts
@@ -29,9 +29,9 @@ export interface ISelectProps {
   labelledBy: string;
   className?: string;
   onMenuToggle?;
-  ClearIcon?: string | Function;
+  ClearIcon?: ReactNode;
   debounceDuration?: number;
-  ClearSelectedIcon?: string | Function;
+  ClearSelectedIcon?: ReactNode;
   defaultIsOpen?: boolean;
   isOpen?: boolean;
 }
diff --git a/src/select-panel/index.tsx b/src/select-panel/index.tsx
index e19ec7f..675d0a5 100644
--- a/src/select-panel/index.tsx
+++ b/src/select-panel/index.tsx
@@ -4,7 +4,13 @@
  * Select-all item, and the list of options.
  */
 import { css } from "goober";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { useMultiSelect } from "../hooks/use-multi-select";
 import { cn } from "../lib/classnames";
@@ -69,6 +75,7 @@ const SelectPanel = () => {
     debounceDuration,
   } = useMultiSelect();
 
+  const searchInputRef = useRef<any>();
   const [searchText, setSearchText] = useState("");
   const [filteredOptions, setFilteredOptions] = useState(options);
   const [searchTextForFilter, setSearchTextForFilter] = useState("");
@@ -116,6 +123,7 @@ const SelectPanel = () => {
   const handleClear = () => {
     setSearchTextForFilter("");
     setSearchText("");
+    searchInputRef?.current?.focus();
   };
 
   const handleItemClicked = (index: number) => setFocusIndex(index);
@@ -185,6 +193,7 @@ const SelectPanel = () => {
             onChange={handleSearchChange}
             onFocus={handleSearchFocus}
             value={searchText}
+            ref={searchInputRef}
           />
           <button
             type="button"
diff --git a/stories/custom-arrow.stories.tsx b/stories/custom-arrow.stories.tsx
index 15c1928..78e8710 100644
--- a/stories/custom-arrow.stories.tsx
+++ b/stories/custom-arrow.stories.tsx
@@ -14,6 +14,8 @@ export const ExampleCustomArrow = () => {
 
   const ArrowRenderer = ({ expanded }) => <>{expanded ? "🦉" : "🦚"}</>;
 
+  const CustomClearIcon = () => <div>🤘</div>;
+
   return (
     <div>
       <pre>{JSON.stringify(selected)}</pre>
@@ -24,6 +26,8 @@ export const ExampleCustomArrow = () => {
         labelledBy={text("labelledBy", "Select Fruits")}
         ArrowRenderer={ArrowRenderer}
         onMenuToggle={(isOpen) => console.log("onMenuToggle", isOpen)}
+        ClearIcon={<CustomClearIcon />}
+        ClearSelectedIcon={<CustomClearIcon />}
       />
     </div>
   );