Open sivavemulapalli opened 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.
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
Thanks switched it to a bug.
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.
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.