Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown/MultiSelect: Add filterDelay property for debounce #7547

Closed
caiorodr opened this issue Jan 2, 2025 · 1 comment · Fixed by #7548
Closed

Dropdown/MultiSelect: Add filterDelay property for debounce #7547

caiorodr opened this issue Jan 2, 2025 · 1 comment · Fixed by #7548
Assignees
Labels
Type: Performance Issue is performance or optimization related
Milestone

Comments

@caiorodr
Copy link

caiorodr commented Jan 2, 2025

Describe the bug

Currently, the Dropdown component in PrimeReact lacks a delay property, which would be helpful when the filter property is enabled. This feature is particularly useful to prevent unnecessary executions of the filtering logic during rapid typing, optimizing performance for large datasets or applications making frequent API requests.

Reproducer

No response

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5700X3D 8-Core Processor
    Memory: 4.74 GB / 15.93 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.112)
  npmPackages:
    primereact: ^10.8.2 => 10.8.2 
    react: ^18.2.0 => 18.3.1

Steps to reproduce the behavior

Steps to Reproduce:

  1. Use the Dropdown component with the filter property enabled.
  2. Type quickly in the input field.
  3. Observe that there is no way to add a delay to control the frequency of the filtering logic execution.

Expected behavior

When the filter property is enabled, the component should allow configuring a delay, similar to other filterable components in PrimeReact, such as the DataTable.

Current Behavior:
There is no support for a delay property, resulting in the immediate execution of the filtering logic with every typing event.

Proposed Solution:
Add an optional delay property to the Dropdown component.

Type: number
Description: Specifies the delay time in milliseconds before executing the filter logic after a typing event.
Default Value: 0 (current behavior, no delay).

<Dropdown
value={selectedValue}
options={options}
filter
delay={300}
onChange={(e) => setSelectedValue(e.value)}
/>

@caiorodr caiorodr added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 2, 2025
@melloware melloware added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 2, 2025
@melloware melloware changed the title Dropdown: Add filterDelay property to the Dropdown. Dropdown/MultiSelect: Add filterDelay property for debounce Jan 2, 2025
@melloware melloware self-assigned this Jan 2, 2025
@melloware melloware added this to the 10.9.2 milestone Jan 2, 2025
melloware added a commit to melloware/primereact that referenced this issue Jan 2, 2025
@melloware
Copy link
Member

PR submitted.

@melloware melloware added Type: Performance Issue is performance or optimization related and removed Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add labels Jan 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Performance Issue is performance or optimization related
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants