Delay a query while user typing a filter value

I have a classic filter query where a user types a value into a text box and my query is triggered by the changed value. This technique is in all of the beginner Retool tutorials.

Always works well with one caveat: The query will run often multiple times while the user is typing his filter value. I have always ignored this but I am now really dialing in the performance of this particular app.

I can change the Delay between runs property to limit the number of times the query is run, especially for a slower typist, but the query will still always run a minimum of two times. First when the user first edits the text box and finally when he stops typing.

Is there a way to prevent the query running until after the user has finished typing, or there is a specific delay between text box changes?

One less slick solution is to only run the query from the text control's onBlur event. Of course I could also have a "Search" button the user clicks after he sets all of the filter criteria. But the reactive behavior is preferred.

Hey Bradly! I think the newer event handler Debounce input is what you would want here! That will wait until the user has stoped typing into the field for X amount of time to trigger the query. Throttle will be the inverse of that, where it would trigger when the user starts typing and not run again until an event that happens more than X milliseconds after the first query run.

That worked. I would really like to see that debounce on the query as well, it would simplify things.

To be clear for others that are following this, you need to change your query to Run query only when manually triggered. Then you need to set the change event for every filter input to run that query.

For drop downs and other other inputs that change a value all at once, this is all you need to do. However, for any inputs that allow the user to type in a value, you need to set the debounce parameter in the event handler to something appropriate, or your query might fire on every keystroke.

The debounce parameter is in miliseconds and tell Retool to wait on firings the event for that amount of time. So if you set to say 500, and you start typing in your text box and you hit a key at least every 1/2 second the event will not fire while you are still typing. If you pause to think halfway through typing, it will fire the event. Then when you resume typing the debounce will pause firing again until it sees another 500ms pause.