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();
    }
}

}

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

Hello,

In the demo page of textbox if I type my name Milind (I have good typing speed), it doesn't show the complete word in textbox. Some of the chars are dropped.(Milind - Miind, Soham - soam, Shevade - Shvae) etc. Even the backspace key on keyboard doesnt seem to work properly. If I type the name at very slow speed I am able to retain all typed chars. It seems to be a bug

Attaching video for reference

Thanks,

Milind Shevade

Hi,

I try to make sure that the user don't need to click the TextBox to gain focus and begin typing.

I have only one TextBox on the page, and it's does not atomatically have focus, - nor can I find a property on the component.

Any ideas :-)

/CU

It would be nice if the Telerik Blazor team could add "Icon" and "IconClass" parameters to the TextBox control, similar to how the TreeListSearchBox control works, which would allow displaying an icon inside the TextBox control:

The kludge specified in this article does not seem to work anymore, and is also not maintainable, since it requires hacking into the implementation details of the TextBox control: How to add icon to the textbox | Telerik UI for Blazor. This should be abstracted by the TextBox control by adding "Icon" and "IconClass" parameters, like many other Telerik Blazor controls have (e.g., buttons: Blazor Button - Icon | Telerik UI for Blazor).

The textbox currently does not use the value attribute for value binding. This translates to a delay in setting the value upon initialization of the component, compared to a standard Blazor InputText.

<AdminEdit>

The same extends to the NumericTextBox

</AdminEdit>

Good morning,

we are using `OnChange` event to catch user input updates when pressing Enter key. Sometimes the event attached valued is not updated.

Here the example: https://blazorrepl.telerik.com/ccaPRPFn26VA0HjW14 , I've attached also a video.

Hello Team;
This is a question;

I was just looking Blazor Docs and noticed they have several Input Tags that cover most cases. I then check Telerik list that I don't see the following in Telerik offering:
InputTextArea
InputSelect
InputCheckbox

I also checked the roadmap for next year and didn't see them either.

My question is, are plans to cover these any time soon? If yes, what's the approximate time-frame?

Secondly, for the time being, should we use the ones that come with Blazor?

Lastly, is there plan to have a mini editor like TinyMCE that we can let user to enter rich text stored in DB?

Thanks in advance!

..Ben

I kind of expect to be able to do something like this:

<TelerikTextBox @bind-Value="@CurrentComment" Label="Comment" Wrap="true" Multiline="true" Resizable="true" Height="200px" Width="100%"></TelerikTextBox>

@code {
    string CurrentComment { get; set; };
}

TextBox Bootstrap Focus error

Starting with Telerik Blazor version 2.13 the focus rectangle is not resetting after the Telerik TextBox loses focus.

Attached project reproduces problem.

Hello,

When I set the width to any value it has no effect.

I am using the boostrap theme:

<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" />