Fix #7547: Dropdown/MultiSelect add filterDelay (#7548)

primefaces · Jan 2, 2025 · b8097b0 · b8097b0
1 parent b7fab09
commit b8097b0
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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