From b8097b04e9b6662fd0d28b3bf6dcd860ee6771ed Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 2 Jan 2025 13:28:38 -0500
Subject: [PATCH] Fix #7547: Dropdown/MultiSelect add filterDelay (#7548)

---
 components/doc/dropdown/filterdoc.js          | 5 +++--
 components/doc/multiselect/filterdoc.js       | 6 +++---
 components/lib/dropdown/Dropdown.js           | 6 +++---
 components/lib/dropdown/DropdownBase.js       | 1 +
 components/lib/dropdown/dropdown.d.ts         | 5 +++++
 components/lib/multiselect/MultiSelect.js     | 6 +++---
 components/lib/multiselect/MultiSelectBase.js | 1 +
 components/lib/multiselect/multiselect.d.ts   | 5 +++++
 8 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/components/doc/dropdown/filterdoc.js b/components/doc/dropdown/filterdoc.js
index 8711ddee9f..7acaecb1d0 100644
--- a/components/doc/dropdown/filterdoc.js
+++ b/components/doc/dropdown/filterdoc.js
@@ -89,7 +89,7 @@ export default function FilterDemo() {
     return (
         <div className="card flex justify-content-center">
             <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
-                filter valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
+                filter filterDelay={400} valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
         </div>    
     )
 }
@@ -143,7 +143,7 @@ export default function FilterDemo() {
     return (
         <div className="card flex justify-content-center">
             <Dropdown value={selectedCountry} onChange={(e: DropdownChangeEvent) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
-                filter valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
+                filter filterDelay={400} valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
         </div>    
     )
 }
@@ -165,6 +165,7 @@ export default function FilterDemo() {
                     optionLabel="name"
                     placeholder="Select a Country"
                     filter
+                    filterDelay={400}
                     showClear
                     valueTemplate={selectedCountryTemplate}
                     itemTemplate={countryOptionTemplate}
diff --git a/components/doc/multiselect/filterdoc.js b/components/doc/multiselect/filterdoc.js
index 5b5dd4444a..5bb45ebc61 100644
--- a/components/doc/multiselect/filterdoc.js
+++ b/components/doc/multiselect/filterdoc.js
@@ -35,7 +35,7 @@ export default function FilterDemo() {
     return (
         <div className="card flex justify-content-center">
             <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
-                filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+                filter filterDelay={400} placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         </div>
     );
 }
@@ -62,7 +62,7 @@ export default function FilterDemo() {
     return (
         <div className="card flex justify-content-center">
             <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
-                filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+                filter filterDelay={400} placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
         </div>
     );
 }
@@ -77,7 +77,7 @@ export default function FilterDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" filter filterDelay={400} placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 0369abb67a..2414966b1f 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useDebounce, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronUpIcon } from '../icons/chevronup';
 import { SpinnerIcon } from '../icons/spinner';
@@ -17,7 +17,7 @@ export const Dropdown = React.memo(
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = DropdownBase.getProps(inProps, context);
-        const [filterState, setFilterState] = React.useState('');
+        const [filterValue, filterState, setFilterState] = useDebounce('', props.filterDelay || 0);
         const [focusedState, setFocusedState] = React.useState(false);
         const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
         const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
@@ -1236,7 +1236,7 @@ export const Dropdown = React.memo(
                         {...props}
                         appendTo={appendTo}
                         cx={cx}
-                        filterValue={filterState}
+                        filterValue={filterValue}
                         focusedOptionIndex={focusedOptionIndex}
                         getOptionGroupChildren={getOptionGroupChildren}
                         getOptionGroupLabel={getOptionGroupLabel}
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index 0db803e089..e30c9c1f8f 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -179,6 +179,7 @@ export const DropdownBase = ComponentBase.extend({
         filter: false,
         filterBy: null,
         filterClearIcon: null,
+        filterDelay: 300,
         filterIcon: null,
         filterInputAutoFocus: false,
         filterLocale: undefined,
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index 5d05c447b4..8750f5af5f 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -328,6 +328,11 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
      * Icon of the filter to clear.
      */
     filterClearIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
     /**
      * When the panel is opened, it specifies that the filter input should focus automatically.
      * @defaultValue false
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index b815d754da..9e4d527f52 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useDebounce, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
 import { SpinnerIcon } from '../icons/spinner';
 import { TimesIcon } from '../icons/times';
@@ -19,7 +19,7 @@ export const MultiSelect = React.memo(
         const props = MultiSelectBase.getProps(inProps, context);
         const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null);
         const [clicked, setClicked] = React.useState(false);
-        const [filterState, setFilterState] = React.useState('');
+        const [filterValue, filterState, setFilterState] = useDebounce('', props.filterDelay || 0);
         const [startRangeIndex, setStartRangeIndex] = React.useState(-1);
         const [focusedState, setFocusedState] = React.useState(false);
         const [overlayVisibleState, setOverlayVisibleState] = React.useState(props.inline);
@@ -1162,7 +1162,7 @@ export const MultiSelect = React.memo(
                         {...props}
                         onClick={onPanelClick}
                         onOverlayHide={hide}
-                        filterValue={filterState}
+                        filterValue={filterValue}
                         focusedOptionIndex={focusedOptionIndex}
                         onFirstHiddenFocus={onFirstHiddenFocus}
                         onLastHiddenFocus={onLastHiddenFocus}
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index 13aece7cd7..cc74985cb1 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -219,6 +219,7 @@ export const MultiSelectBase = ComponentBase.extend({
         emptyMessage: null,
         filter: false,
         filterBy: null,
+        filterDelay: 300,
         filterInputAutoFocus: true,
         filterLocale: undefined,
         selectOnFocus: false,
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
index 3d51df033c..d579286e53 100644
--- a/components/lib/multiselect/multiselect.d.ts
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -476,6 +476,11 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
      * @defaultValue label
      */
     filterBy?: string | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
     /**
      * When the panel is opened, it specifies that the filter input should focus automatically.
      * @defaultValue true