primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.67k stars 1.01k forks source link

DataTable: OnFilter not being called #6041

Open sivavemulapalli opened 7 months ago

sivavemulapalli commented 7 months ago

Describe the bug

onFilter event is not getting triggered when you clear the last character in global search string or select all and delete the string at once.

I am having a lazy loading data table with global filter instead of filter on individual columns.

const [datatableLazyState, setDatatableLazyState] = useState({ first: 0, rows: 5, page: 1, sortField: undefined, sortOrder: undefined, filters: { global: { value: null, matchMode: "contains" }, }, });

This state I am maintaining at the parent component level instead of at the datatable level for other functionality reasons. I am passing the global search string back as prop to datatable as globalFilter prop (globalFilter = globalFilterValue). It works fine when characters being entered or removed as long as atleast one character is present in search the string. But when you backspace the last character or clear the entire string at once. The filter event is not getting triggered.

I believe the problem is with the method highlighted in the attached screenshot. The highlighted if condition is becoming falsy when you clear the search string (becomes empty string - '') and not allowing the filter event. As long as one character is present in the search string, the condition evaluates to truthy and filtering happens.

image

Reproducer

https://codesandbox.io/p/sandbox/primereact-demo-forked-vt5g47?file=%2Fsrc%2FReUsableDatatable.tsx

PrimeReact version

9.6.4 and latest as well

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1) Open the Reproducer link mentioned above. 2) Open the browser console within the sandbox browser 3) Type any two characters into the global search box. You will see console log statements added in the onFilter callback method getting printed. 4) Select both the characters from search box and delete at one go(ctrl+A -> Del). You will see that the console log statements added in the onFilter callback method doesnt get printed in the console.

OR

4) Backspace two times in the search box. You will see that the console log statements added in the onFilter callback method doesnt get printed in the console after pressing the second backspace.

Expected behavior

onFilter event should trigger when backspace the last character in the global search string or clear the search string all at once.

github-actions[bot] commented 7 months ago

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

sivavemulapalli commented 7 months ago

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

@melloware Added the reproducer link, attached the missing screenshot in description and also updated the steps to reproduce

melloware commented 7 months ago

Thanks switched it to a bug.