Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 16 Apr 2025 13:39 by Stefan
Stefan
Created on: 31 Mar 2025 12:50
Category: TextBox
Type: Feature Request
1
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

1 comment
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);
}
Create an account Log In
View
Type
Status
Category