Blazor Textfield Oninput User Typing Delay

Solution:

There is no single solution to your question. The following code is just one approach. Take a look and adapt it to your requirements. The code resets a timer on each keyup, only last timer raises the OnUserFinish event.
Remember to dispose timer by implementing IDisposable

@using System.Timers;
@implements IDisposable;

<input type="text" @bind="Data" @bind:event="oninput" 
       @onkeyup="@ResetTimer"/>
<p >UI Data: @Data
<br>Backend Data: @DataFromBackend</p>

@code {
    public string Data { get; set; } = string.Empty;
    public string DataFromBackend { get; set; }  = string.Empty;
    private Timer aTimer = default!;
    protected override void OnInitialized()
    {
        aTimer = new Timer(1000);
        aTimer.Elapsed += OnUserFinish;
        aTimer.AutoReset = false;
    }
    void ResetTimer(KeyboardEventArgs e)
    {
        aTimer.Stop();
        aTimer.Start();        
    }    
    private async void OnUserFinish(Object? source, ElapsedEventArgs e)
    {
        // https://stackoverflow.com/a/19415703/842935
        // Call backend
        DataFromBackend = await Task.FromResult( Data + " from backend");
        await InvokeAsync( StateHasChanged );
    }
    void IDisposable.Dispose()
        =>
        aTimer?.Dispose();    
}

Use case:

One example of use case of this code is avoiding backend requests, because the request is not sent until user stops typing.

Running:

sample code running

Leave a Comment