How to debounce onFilterChange for KendoReact Combobox (server-filter)

2 Answers 32 Views
ComboBox
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 30 Jul 2021, 08:12 AM

Hi Team, 

I have a ComboBox that and my use case is that when a user types into it, it will send a request to a server to get the search results and set the data, for the user to then select. So a server filter, kind of.

The problem is that onFilterChange is triggered on each keypress which in turn sends a request to the server each time. I would like to debounce the request to the server until the user has stopped typing, but I cannot find a debounce function that works. I know how to use useEffect and useRef, but the refVarialbe.current doesnt update on filterChange, only on value change. Which is not my use-case.

Attempts: https://stackblitz.com/edit/react-pht5mn?file=app%2Fmain.jsx

Has anyone had any success with this?

Please advise.

Thanks,
Grant

2 Answers, 1 is accepted

Sort by
0
Accepted
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 03 Aug 2021, 01:17 PM

@Stefen, 

 

Thanks for helping me out with this. Your answer is a bit more complicated than needed by including paging & data caching.

 

But I managed to figure out what you are getting at and I was able to use it to build this stripped down version.

 

Thanks and Kind regards,

Grant

1
Stefan
Telerik team
answered on 03 Aug 2021, 04:50 AM

Hello, Grant,

Currently, we have this example that shows how to limit the requests. The idea here is to make a request only when there is no other request waiting. This will still make more requests, not only one when the user stops typing:

https://stackblitz.com/edit/react-v9s5jp?file=app/main.jsx

For the debounce on the onFilterChange, we have to monitor when the user types during the onFilterChange event, and if there is X amount of times passed after the last time the event is fired, we can send the request.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ComboBox
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Grant
Top achievements
Rank 2
Veteran
Iron
Stefan
Telerik team
Share this question
or