primefaces / primefaces/primereact

DataTable: Empty "globalFilter" doesn't trigger onFilter on lazy mode

Open
#6,773 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

Hey guys, how are you doing?

I've been experiencing some issues when using globalFilter when DataTable is on lazy mode.

Whenever the value of globalFilter changes, the onFilter is triggered, as expected.
But when the value of globalFilter returns to a falsy value, the onFilter is not triggered.

I dunno if I'm doing something wrong, but the onFilter should trigger event when the value of globalFilter is cleared, as it's returning to its initial state (kinda...).

I'm afraid this can impact solutions done before, like #2777 which has been fixed in #2986.

Isn't the right approach to the useUpdateEffect to consider only if the value of the globalFilter is different than null | undefined?

 useUpdateEffect(() => {
        if (typeof props.globalFilter === "string") { // OR props.globalFilter !== null || props.globalFilter !== undefined) 
            filter(props.globalFilter, 'global', 'contains');
        }
    }, [props.globalFilter]);

I don't know if I'm being stupid, but I'd like to understand if this is exaclty a bug or something.

Sorry for my english and thank you for the attention!

Reproducer

https://stackblitz.com/edit/vitejs-vite-vctmgs?file=src%2FApp.tsx

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior
  1. Create a DataTable on lazy mode.
  2. Create a state to control globalFilter.
  3. Input values on globalFilter field and then remove the value.
Expected behavior

The onFilter event should trigger when the value globalFilter is an empty string.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproducer and inspect DataTable's lazy filtering path, especially the useUpdateEffect handling props.globalFilter. Confirm the behavior when the controlled globalFilter changes from text to an empty string; done means onFilter fires for the cleared value without regressing normal filtering.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.