Unplanned
Last Updated: 21 Apr 2026 12:22 by Alexey
Stefan
Created on: 31 Mar 2025 12:50
Category: TextBox
Type: Bug Report
8
Make the OnChange event receive the immediate value when the DebounceDelay is greater than 0

Example:

<PageTitle>Home</PageTitle>

<div>
    <TelerikTextBox Width="20rem" Placeholder="Pallet" DebounceDelay="1000" @bind-Value="@_textInput" OnChange="@(async (input) => await OnInputChanged(input))" />
</div>
<p>@_textInput</p>


@code {
    private string? _textInput;

    private async Task OnInputChanged(object input)
    {
        Console.WriteLine($"Immediate: function parameter: {input}, bound variable: {_textInput}");
        await Task.Delay(1000);
        Console.WriteLine($"Delayed: function parameter: {input}, bound variable: {_textInput}");
        //Make the OnChange event receive the immediate value when the DebounceDelay is set
    }
}

The DebounceDelay is set to 1 second to highlight the behavior, although we have observed it with delays less than 100 milliseconds when the input is from a barcode scanner and the Enter is part of the scan. Start the sample, type "123" in the input, and hit enter within 1 second.

The output in the console is:
Immediate: function parameter: , bound variable:
Delayed: function parameter: , bound variable: 123

2 comments
Alexey
Posted on: 21 Apr 2026 12:22
I have the same trouble.
When I use DebounceDelay like 1 second and when my users Press key ENTER after typing text they have wrong value like on this example :


@* SearchInput.razor *@
<form @onsubmit="HandleFormSubmit" @onsubmit:preventDefault>
    <TelerikTextBox Value="@_value"
                    ValueChanged="@HandleValueChanged"
                    Placeholder="Search..."
                    DebounceDelay="@DebounceDelay" />
    <button type="submit">Search</button>
</form>
<p><strong>@_submittedValue</strong></p>
<p>Current internal value: <strong>@_value</strong></p>
@code {
    private int DebounceDelay { get; set; } = 5000; // 5 seconds
    private string _value = string.Empty;
    private string _submittedValue = string.Empty;
    private void HandleValueChanged(string value)
    {
        _value = value;
    }
    private async Task HandleFormSubmit()
    {
        try {
            DebounceDelay = 0;
            var time = DateTime.UtcNow.ToString("mm:ss");
           _submittedValue = $"Submitted value:{_value} at time: {time}";
        }
        finally
        {
            DebounceDelay = 5000; //set back 5 seconds
        }
       await Task.CompletedTask;
    }
}



Can you please fix issue:  ValueChanged not fired before form submit when DebounceDelay is set more than 150 ms.
Stefan
Posted on: 16 Apr 2025 13:39

The title of the request '... OnChange event receive the immediate value ...' is a bit ambiguous. What we need is the OnChange event to fire after the DebouceDelay has passed, like in the construct below. And this should also apply to OnBlur. OnBlur doesn't pass the value to the event handler, but the bound variable should already be updated when OnBlur fires. Otherwise, we have to delay code execution for the binding logic to catch up. The DebounceDelay is a good thing, but events need to be synched with it.

if (DebounceDelay == 0)
{ ... }
else
{
    _debouncer.Debounce(() =>
        { return this.InvokeAsync(() => { ... }); }
, DebounceDelay);
}