DataTable: Advanced Filter with Calendar must select date twice

[fullstackomar]

Describe the bug

There is alot of issues regarding all updates after v10.2.0 , the calendar I have to click twice to be able to make it choose the date.

addLocale api for datatable is not working after patch v10.2.0

datatable input field is too slow when trying to search with more than 10 rows, when trying to type an input into the filter it keeps getting a delay of some milliseconds before the input gets added to the input field , i tried to set filterDelay to 0 but the issue still presents.

serverside pagination is too hard to do and mellowware solution seems to work with useQuery but what about people using prisma or normal query databases ?

Reproducer

here in primereact page , if you tried to filter by date you have to click it twice

https://primereact.org/datatable/#advanced_filter

PrimeReact version

^10.2.0

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

chrome, firefox

Steps to reproduce the behavior

1- go to datatable advanced filter
2- try to search with dates table using calendar
3- addLocale translation when adding it after version v10.2.0 doesn't seem to work

Expected behavior

really hope this bug fixes get resolved , also I really hope there is a good solution when working with datatable to make it work easily serverside with pagination.

[github-actions]

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]

I can't reproduce any of your issues...so you will need to provide working reproducer showing the bugs with 10.5.3.

[fullstackomar]

I can't reproduce any of your issues...so you will need to provide working reproducer showing the bugs with 10.5.3.

here in primereact page , if you tried to filter by date you have to click it twice

https://primereact.org/datatable/#advanced_filter

I tried to make a fork and made an example but it seems to work but it doesn't work when i installed it on my project , also can you tell me how to make a serverside pagination and improve the performance of the page into this example ?

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

[melloware]

OK so your double click calendar issue in the Advanced filter i can see that now.

But as for performance you reproducer works fine for me? Its lightning fast? Or am I missing something?

My Quarkus Primereact demo using real Rest and DB is also lightning fast.

[fullstackomar]

the filter works fast but when you try to type a message into input field its too slow to show , I am using t3stack ( next js ) maybe that is the issue , not sure.

[melloware]

Let me try that. It might also be related to having 100 rows displayed? Is it faster with only 10 rows displayed?

[fullstackomar]

into my main application I am working with only 25 rows but the input typing is pretty slow it takes about 500ms to show on every change

[melloware]

Ok I think your issue is this one: #5017

[fullstackomar]

yes it is the one

[melloware]

OK let's track the performance issue in that other ticket and the double click calendar in this ticket.

[fullstackomar]

I found another issue , If i tried to filter with MultiSelect in datatable the page crash with error , I also added the example in the stackblitz link

TypeError: filter.trim is not a function

also the addLocale api function when I tried to translate datatable its not working ( i noticed that this issue started to happen in patch 10.3.0 )

[melloware]

Multiple issues in the same ticket will be ignored. Please open a new ticket specific to the issue with minimum Stack Blitz to reproduce the issue...

[fullstackomar]

thank you for fast response , i will open a new ticket with the 2 issues