TelerikTextBox Component using OnChange and OnBlur for Enter Presses

[Glenn]

I am attempting to utilize the OnChange and OnBlur events to handle when the enter button is pressed on an input (TelerikTextBox). I can get it to work quite easily, however, I do not want the OnBlur functionality at all. The more irritating part is that the OnChange event is fired by both the enter button, and the OnBlur event. Even when I change the OnBlur event to do nothing, the OnChange event still fires when we lose focus on the component. I only want the enter button presses to fire the OnChange event. Am I doing this wrong? Is there another method to this? Here is what I have so far:

                                            <TelerikTextBox Value="@_scanSlotInput"
                                                            OnChange="@SubmitScanSlot"
                                                            OnBlur="@HandleBlur"
                                                            ValueChanged="@((string v) => { _scanSlotInput = (v).ToUpperInvariant(); StateHasChanged(); })"
                                                            Placeholder="Scan or enter Slot QR"
                                                            Enabled="@(!_isSessionEnded)">
                                                <TextBoxPrefixTemplate>
                                                    <TelerikButton OnClick="@StartScanSlotQr" Enabled="@(!_isSessionEnded)" FillMode="@ThemeConstants.Button.FillMode.Clear">
                                                        <span class="fa-duotone fa-solid fa-camera-viewfinder" style="color: var(--kendo-color-primary, #0056b3);"></span>
                                                    </TelerikButton>
                                                </TextBoxPrefixTemplate>
                                                <TextBoxSuffixTemplate>
                                                    <TelerikButton OnClick="@(() => { _ignoreNextChange = false; return SubmitScanSlot(); })" Enabled="@(!_isSessionEnded)" FillMode="@ThemeConstants.Button.FillMode.Clear">
                                                        <span class="fa-duotone fa-solid fa-circle-check" style="color: var(--kendo-color-success, #28a745);"></span>
                                                    </TelerikButton>
                                                </TextBoxSuffixTemplate>
                                            </TelerikTextBox>

    private bool _ignoreNextChange;

    private async Task HandleBlur()
    {
        _ignoreNextChange = true;
        await Task.Delay(300);
        _ignoreNextChange = false;
    }

The @SubmitScanSlot function is excluded because it has "if (_ignoreNextChange) return;" and then goes into the rest of the function and is not relevant to this issue.

I saw the knowledge base article on the OnChange event firing twice and tried utilizing that, but the problem is not validating whether or not the value in the text box has changed, but to ignore the OnBlur completely and only allow the enter key to fire the event.

[Dimo]

Hi Glenn,

Using one event does not affect when another event fires. I agree that the "OnChange" event name is not optimal, but the original idea was to make the event similar to the Blazor @onchange that used to fire on Enter and blur. The current event purpose would be closer to a name like "OnConfirm".

If you want to detect specifically Enter keypresses, you can use the standard Blazor @onkeydown on the TextBox parent element. I hope this approach is acceptable for you.

<span @onkeydown="@OnTextBoxKeyDown">
    <TelerikTextBox @bind-Value="@TextBoxValue" Width="200px" />
</span>

@code {
    private string TextBoxValue { get; set; } = string.Empty;

    private void OnTextBoxKeyDown(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {

        }
    }
}

 

Regards,
Dimo
Progress Telerik