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.

Answer 1

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...

Answer 2

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

Answer 3

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

Answer 4

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