Feature/debounce search (#154)

* Add Search debounce feature

* Add default values for debounce

* Enable debounce by default and change debounce duration to 300

* Removed debounceSearch references

Co-authored-by: Harsh Zalavadiya <[email protected]>

Author: Kannndev

README.md

@@ -81,6 +81,7 @@ export default Example;
 | `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`            |                |
+| `debounceDuration`    | debounce duraion for Search                            | `number`                     | `300`          |
 | `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `string|function`            |                |
 
 ## 🔍 Custom filter logic

src/lib/debounce.tsx

@@ -0,0 +1,9 @@
+export const debounce = (func, wait) => {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      func.apply(null, args);
+    }, wait);
+  };
+};

src/lib/interfaces.ts

@@ -35,5 +35,6 @@ export interface ISelectProps {
   className?: string;
   onMenuToggle?;
   ClearIcon?: string | Function;
+  debounceDuration?: number;
   ClearSelectedIcon?: string | Function;
 }

src/multi-select/index.tsx

@@ -46,6 +46,7 @@ const MultiSelect = ({
   labelledBy,
   onMenuToggle,
   ClearIcon,
+  debounceDuration = 300,
   ClearSelectedIcon,
 }: ISelectProps) => {
   const nvalue = value || [];
@@ -68,6 +69,7 @@ const MultiSelect = ({
           filterOptions,
           overrideStrings,
           ClearIcon,
+          debounceDuration,
         }}
         disabled={disabled}
         labelledBy={labelledBy}

src/select-panel/index.tsx

@@ -4,9 +4,10 @@
  * Select-all item, and the list of options.
  */
 import { css } from "goober";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { filterOptions } from "../lib/fuzzy-match-utils";
+import { debounce } from "../lib/debounce";
 import getString from "../lib/get-string";
 import { Option } from "../lib/interfaces";
 import Cross from "./cross";
@@ -26,6 +27,7 @@ interface ISelectPanelProps {
   filterOptions?: (options: Option[], filter: string) => Option[];
   overrideStrings?: { [key: string]: string };
   ClearIcon?;
+  debounceDuration?: number;
 }
 
 enum FocusType {
@@ -74,11 +76,17 @@ export const SelectPanel = (props: ISelectPanelProps) => {
     hasSelectAll,
     overrideStrings,
     ClearIcon,
+    debounceDuration,
   } = props;
   const [searchText, setSearchText] = useState("");
+  const [searchTextForFilter, setSearchTextForFilter] = useState("");
   const [focusIndex, setFocusIndex] = useState(
     focusSearchOnOpen && !disableSearch ? FocusType.SEARCH : FocusType.NONE
   );
+  const debouncedSearch = useCallback(
+    debounce((query) => setSearchTextForFilter(query), debounceDuration),
+    []
+  );
 
   const selectAllOption = {
     label: selectAllLabel || getString("selectAll", overrideStrings),
@@ -106,11 +114,15 @@ export const SelectPanel = (props: ISelectPanelProps) => {
   };
 
   const handleSearchChange = (e) => {
+    debouncedSearch(e.target.value);
     setSearchText(e.target.value);
     setFocusIndex(FocusType.SEARCH);
   };
 
-  const handleClear = () => setSearchText("");
+  const handleClear = () => {
+    setSearchTextForFilter("");
+    setSearchText("");
+  };
 
   const handleItemClicked = (index: number) => setFocusIndex(index);
 
@@ -141,8 +153,8 @@ export const SelectPanel = (props: ISelectPanelProps) => {
 
   const filteredOptions = () =>
     customFilterOptions
-      ? customFilterOptions(options, searchText)
-      : filterOptions(options, searchText);
+      ? customFilterOptions(options, searchTextForFilter)
+      : filterOptions(options, searchTextForFilter);
 
   const updateFocus = (offset: number) => {
     let newFocus = focusIndex + offset;