fix: 🐛 clear selected icon + on search clear (#345)

Author: harshzalavadiya

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;
 }

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"

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>
   );