Unplanned
Last Updated: 14 Aug 2020 06:32 by ADMIN
Christian
Created on: 06 Feb 2020 13:17
Category: TextBox
Type: Feature Request
4
How to set default focus on a TextBox (an autofocus attribute)

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

 

3 comments
ADMIN
Marin Bratanov
Posted on: 14 Aug 2020 06:32

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

Jason
Posted on: 13 Aug 2020 18:59
It would also be good to have the ability to set focus on a TelerikButton.  Currently I don't think TelerikButton has an ID, so this is a little tricky to do with JS.  
ADMIN
Marin Bratanov
Posted on: 06 Feb 2020 14:07

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

 UI for Blazor