primefaces / primefaces/primereact
DataTable: Empty "globalFilter" doesn't trigger onFilter on lazy mode
Nobody has claimed this yet.
- 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
- Create a DataTable on lazy mode.
- Create a state to control
globalFilter. - Input values on
globalFilterfield and then remove the value.
Expected behavior
The onFilter event should trigger when the value globalFilter is an empty string.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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