Hi Alireza,

To investigate the described behavior further, I attempted to replicate the problem by creating an example with the below code snippets. On my end, it seems that the text is correctly entered in the input after the initial focus. I'm sharing the sample via this REPL link for your reference, so you can compare it with the actual application to determine if anything is missing or if there are other factors that may be causing the issue.

If the problem persists, modify the above REPL sample to demonstrate the problematic behavior in a self-contained, runnable manner. This will enable me to conduct a more thorough investigation of the scenario with a configuration that closely resembles the actual environment.

Additionally, there is another approach that excludes the usage of JavaScript - you can use the TextBox "FocusAsync()" method through the component reference. Here is an example of it as well:

<TelerikTextBox @ref="@DefaultFocusTextBox" />

@code {
    TelerikTextBox DefaultFocusTextBox { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await Task.Delay(1);
            await DefaultFocusTextBox.FocusAsync();
        }
    }
}

Regards,
Hristian Stefanov
Progress Telerik

Hi Jason,

You can Follow an ID for the button here: https://feedback.telerik.com/blazor/1463164-id-attribute-on-buttons-telerikbuttons-gridcommandbuttons-etc. For the time being, the Class, or cascading through a parent container with an ID can help.

Regards,
Marin Bratanov
Progress Telerik

Hello Christian,

I moved this ticket to the feedback portal so you can Follow its progress (here's a link for you: https://feedback.telerik.com/blazor/1452577-how-to-set-default-focus-on-a-textbox-an-autofocus-attribute). I also touched the title to be about an autofocus attribuet which is something we've been considering for a while. You may also want to Follow this one as it may allow you to splat such an attribute: https://feedback.telerik.com/blazor/1416978-support-arbitrary-attributes.

At the moment such a feature is not available in Blazor as-is. Hopefully, a .Focus() method will become available in the standard inputs and we would be able to inherit it.

For the time being, the only option is to use JS Interop:

have this JS snippet on your index page (or in another JS file) which focuses the first input based on a selector

    <script>
        function focusInputFromBlazor(selector) {
            var input = document.querySelector(selector);
            if (!focusInput(input)) {
                input = input.querySelector("input");
                focusInput(input);
            }
        }

        function focusInput(input) {
            if (input && input.focus) {
                input.focus();
            }
            else {
                return false;
            }
        }
    </script>

here's how to use it from the razor component:

@inject IJSRuntime JsInterop

<TelerikTextBox Class="defaultFocus"></TelerikTextBox>

@* the JS snippet above can work with this too *@
@*<input class="defaultFocus" />*@

@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await JsInterop.InvokeVoidAsync("focusInputFromBlazor", new[] { ".defaultFocus" });
        }
    }
}

On another note, we are working on exposing ID parameters on our inputs (mostly so you can attach a <label> to them), but that would also make them easier to identify with JS. Those ID parameters would render as id attributes on the input DOM element (the Class in the example above renders on the wrapper element, not on the input - this is one of the reasons for this rather involved JS snippet, the second is so you can provide a class for a wrapper and have default focus in its first input).

Regards,
Marin Bratanov
Progress Telerik