Blazor Textfield Oninput User Typing Delay


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" 
<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)
    private async void OnUserFinish(Object? source, ElapsedEventArgs e)
        // Call backend
        DataFromBackend = await Task.FromResult( Data + " from backend");
        await InvokeAsync( StateHasChanged );
    void IDisposable.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.


sample code running

Leave a Comment