Blazor: Using a keyboard event together with DebounceInterval in a MudBlazor textfield - binding

Question

I am using MudBlazor to develop a client-side Blazor-WASM app. I have a search field which is to update the bound variable in real-time (i.e. not only after losing focus, but while typing). Furthermore, I want to clear the MudTextField's text if user presses the -key (so they don't have to use the clear-button if they don't want to). Well, if I do it like this, it works perfectly:
<MudTextField Label="search something" Variant="Variant.Text" Clearable="true"
#bind-Value="SearchText" Immediate="true"
#onkeydown="e => KeyboardEventHandler(e)"
/>
#code {
public string SearchText { get; set; }
private void KeyboardEventHandler(KeyboardEventArgs args)
{
if (args.Code == "Escape") { SearchText = string.Empty; }
}
}
This works like a charm. However, I need the component to wait a little while before updating the variable, because each change triggers a new filtering process that may block the UI for a bit (since BlazorWASM, at the time, doesn't support multithreading). So, I use DebounceInterval, i. e. do it like this:
<MudTextField Label="search something" Variant="Variant.Text" Clearable="true"
#bind-Value="SearchText" Immediate="true" DebounceInterval="350"
#onkeydown="e => KeyboardEventHandler(e)"
/>
#code {
public string SearchText { get; set; }
private void KeyboardEventHandler(KeyboardEventArgs args)
{
if (args.Code == "Escape") { SearchText = string.Empty; }
}
}
If I do it like this, when typing faster than the debounce interval, only the last typed character is kept (i.e. every character typed replaces the one before it), as long as the #onkeydown event is used, too.
How can I make this work? I'd be grateful for a possible solution or ideas towards it.
Thanks for taking the time to read this.

Answer 1

There are a few ways to implement a debouncer. The simplest is just to do a backoff of say 300ms before doing your lookup. This gives you a 300ms + your lookup period.
Here's a slightly different method that uses Tasks and waits either the backoff period or the query period whichever is the longer.
The deboucer with lots of comment code to explain what's happening.
public sealed class ActionLimiter
{
private int _backOffPeriod = 0;
private Func<Task> _taskToRun;
private Task _activeTask = Task.CompletedTask;
private TaskCompletionSource<bool>? _queuedTaskCompletionSource;
private TaskCompletionSource<bool>? _activeTaskCompletionSource;
private async Task RunQueueAsync()
{
// if we have a completed task then null it
if (_activeTaskCompletionSource is not null && _activeTaskCompletionSource.Task.IsCompleted)
_activeTaskCompletionSource = null;
// if we have a running task then everything is already in motion and there's nothing to do
if (_activeTaskCompletionSource is not null)
return;
// run the loop while we have a queued request.
while (_queuedTaskCompletionSource is not null)
{
// assign the queued task reference to the running task
_activeTaskCompletionSource = _queuedTaskCompletionSource;
// And release the reference
_queuedTaskCompletionSource = null;
// start backoff task
var backoffTask = Task.Delay(_backOffPeriod);
// start main task
var mainTask = _taskToRun.Invoke();
// await both ensures we run the backoff period or greater
await Task.WhenAll( new Task[] { mainTask, backoffTask } );
// Set the running task completion as complete
_activeTaskCompletionSource.TrySetResult(true);
// and release our reference to the running task completion
// The originator will still hold a reference and can act on it's completion
_activeTaskCompletionSource = null;
// back to the top to check if another task has been queued
}
return;
}
public Task<bool> QueueAsync()
{
var oldCompletionTask = _queuedTaskCompletionSource;
// Create a new completion task
var newCompletionTask = new TaskCompletionSource<bool>();
// get the actual task before we assign it to the queue
var task = newCompletionTask.Task;
// replace _queuedTaskCompletionSource
_queuedTaskCompletionSource = newCompletionTask;
// check if we already have a queued queued task.
// If so set it as completed, false = not run
if (oldCompletionTask is not null && !oldCompletionTask.Task.IsCompleted)
oldCompletionTask?.TrySetResult(false);
// if we don't have a running task or the task is complete , then there's no process running the queue
// So we need to call it and assign it to `runningTask`
if (_activeTask is null || _activeTask.IsCompleted)
_activeTask = this.RunQueueAsync();
// return the reference to the task we queued
return task;
}
private ActionLimiter(Func<Task> toRun, int backOffPeriod)
{
_backOffPeriod = backOffPeriod;
_taskToRun = toRun;
}
/// <summary>
/// Static method to create a new deBouncer
/// </summary>
/// <param name="toRun">method to run to update the component</param>
/// <param name="backOffPeriod">Back off period in millisecs</param>
/// <returns></returns>
public static ActionLimiter Create(Func<Task> toRun, int backOffPeriod)
=> new ActionLimiter(toRun, backOffPeriod > 300 ? backOffPeriod : 300);
}
And a demo page to show how to use it:
#page "/"
#using Blazr.UI
<h3>Test</h3>
<input class="form-control mb-2" type="text" #oninput=OnInput />
<div class="alert alert-info">
#message
</div>
#code {
private ActionLimiter _limiter;
private string? message;
private string? value;
public Test()
=> _limiter = ActionLimiter.Create(this.RunTask, 300);
private async Task OnInput(ChangeEventArgs e)
{
value = e.Value?.ToString() ?? null;
await _limiter.QueueAsync();
}
private async Task RunTask()
{
// simulate doing your search
await Task.Delay(1000);
message = value;
}
}
There's a full CodeProject article here describing this technique and how to build a Typeahead control using it.
https://www.codeproject.com/Articles/5351256/Building-a-Blazor-Autocomplete-Control