We have forms that starts with single text box input, all other inputs are either hidden or disabled. Based on the value of that input we load additional data from the server, show/enable the rest of the inputs and move the focus to the next unput. We react to the value in that first input either when the Enter key is pressed, or when the input loses focus e.g. tab-out of the input or click/tap on another input. One or the other but never both. This scenario should be handled by the OnChange event. However, the OnChange event fires twice, when the enter key is pressed and again when the text box loses focus. This results in double data retrieval (takes twice the time), screen flicker and creates unpleasant user experience.

The recommended workaround is to add second variable to track if the input actually changed and ignore consequent events for the same value. This has it’s own caveat. If for any reason the user wants to retrieve the related data from server again e.g. he was notified it has changed, then he cannot use the OnChange event anymore because the value hasn’t changed and the event will be ignored. So the user has to change the value twice.

 We found a second workaround, see code below. Blur the text box on enter and handle only the on OnBlur event to process the value. This way we can process the value repeatedly, the user presses enter or tab-out, then focus back on the same input and hit enter or tab-out and repeat as many times as desired.

 We propose OnEnter event to be added to the text box so we don’t have to handle @onkeypress on outer <div>. The <div> events are also not synchronized with the DebounceDelay parameter of the text box. We have to either set the DebounceDelay to 0 or introduce delay in the KeyHandler method. The text box has OnBlur event already but surprisingly there is no OnEnter event.

We also proposed BlurAsync() method that will eliminate the need to create the javascript function and invoke JSRuntime.

 <<< javascript function >>>
function blurInput(inputId) {
    const textField = document.getElementById(inputId);
    if (textField) {
        textField.blur();
    }
}

<<< Blazor >>>
@page "/" 
@inject IJSRuntime JSRuntime

<PageTitle>Home</PageTitle>

<div @onkeydown="@(async (args) => await KeyHandler(args))">
    <TelerikTextBox id="txt1" Width="20rem" Placeholder="Pallet" DebounceDelay="0" @bind-Value="@_textInput" OnBlur="@OnInputBlur" />
</div>
<div>
    <TelerikTextBox @ref="_txtRef" Width="20rem" Placeholder="Pallet" />
</div>

@code
{
    private string? _textInput;
    private TelerikTextBox _txtRef = null!;

    private async Task KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await JSRuntime.InvokeVoidAsync("blurInput", "txt1");
        }
    }

    private async Task OnInputBlur()
    {
        Console.WriteLine($"Bound variable: {_textInput}");
        await _txtRef.FocusAsync();
    }
}

}