How do I set focus to a text box in Blazor

Question

How do I set focus to a textbox in Blazor? So far the only way we have found is with JavaScript.

Does this answer your question? [How to set the focus to an InputText element?](https://stackoverflow.com/questions/59137973/how-to-set-the-focus-to-an-inputtext-element) — mfluehr, Dec 17 '20 at 14:08

Alexandre · Answer 1 · 2021-11-25T15:00:06.360

34

.Net 5 (or higher) makes this easy!

<input type="text" @ref="myref"/>

@code {

    private ElementReference myref;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await myref.FocusAsync();
        }
   }
}

edited Nov 25 '21 at 15:00

answered Dec 03 '20 at 21:00

Alexandre

7,004
5
54
72

2

Many examples for FocusAsync fail to mention that it must be called in the OnAfterRenderAsync method (as Alexandre shows). Also don't miss that FocusAsync has an optional bool arg that scrolls the focused element into view. – rp. May 28 '22 at 15:46
Works great! I'm posting an answer for Radzen components below (it's slightly different, but needs to be shared here). – MC9000 Jan 19 '23 at 21:15

score 5 · Answer 2 · answered May 09 '22 at 07:45

If you have a built-in type like InputNumber and you are using .Net6, you can apply the solution of @Alexandre but with some changes like this:

<InputNumber @ref="MyRef" @bind-Value="MyValue" />
<button class="btn btn-primary" @onclick="MyClick"> Click me </button>

private InputNumber<int> MyRef;
private int MyValue {get; set;}

//Some click event
private void MyClick()
{
   if(MyRef.Element.HasValue) 
   {
     MyRef.Element.Value.FocusAsync();
   }
}

score 2 · Accepted Answer · answered Feb 19 '20 at 21:37

There is no other way to do it... You can use JSInterop to do this, as follows:

 <input type="text" @ref="myref"/>

 @code {

    private ElementReference myref;
    [Inject] IJSRuntime JSRuntime { get; set; }

     protected override async Task OnAfterRenderAsync(bool firstRender)
    {
         if (firstRender)
        {
            await 
        JSRuntime.InvokeVoidAsync("exampleJsFunctions.focusElement", myref);
        }
   }
 }

JavaScript

<script>

    window.exampleJsFunctions =
    {
        focusElement: function (element) {
           element.focus();
        }
    };
</script>

Hope this helps...

score 1 · Answer 4 · answered May 29 '22 at 04:36

1

This Demo Shows that by clicking on button focus set to textbox.

@page "/setfocus"

<input @ref="textInput" />

<button @onclick="() => 
textInput.FocusAsync()">Set
    focus</button>

@code {
    ElementReference textInput;
}

answered May 29 '22 at 04:36

M Fa

109
1
3

As several other questions/answers have pointed out, this does not always work. You need to defer the `FocusAsync` call until `OnAfterRenderAsync` https://stackoverflow.com/questions/72411471/blazors-focusasync-doesnt-always-set-focus – iCollect.it Ltd Jun 20 '23 at 11:17

score 1 · Answer 5 · answered Jan 19 '23 at 21:21

For those of us using a 3rd party control, the provider should have an equivalent element reference to make Alexandre's answer work (DotNet5 and up)

<RadzenTextBox @ref="searchBox" Name="SearchPhrase" @bind-Value=@SearchString MaxLength="400" @oninput=@(args => OnChangedSearch(args.Value.ToString())) @onkeydown="@Enter" />
        
     @code{   
            RadzenTextBox searchBox;
            protected override async Task OnAfterRenderAsync(bool firstRender)
            {
                if (firstRender)
                {
                    await searchBox.Element.FocusAsync(); //NOTE: this is for Radzen "elements"
                }
            }
        }

How do I set focus to a text box in Blazor

5 Answers5

JavaScript

Linked