c# - .Net5 FocusAsync() not compiling

Question

I am new to and playing with MS Blazor on the new .Net5 framework. I am attempting to set the focus of a text element when a button is clicked. I have seen this code elsewhere and trying to get it to compile:

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

VS2019 is throwing an error on the textInput value: The name 'textInput' does not exist in the current context.

Any help is appreciated.

Answer 1

In your @code section you need to create a property/variable called textInput which is of type ElementReference. There's then an extension method on ElementReference that's in the Microsoft.AspNetCore.Components namespace called FocusAsync which you should be able to call.

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

@code {
   private ElementReference textInput;
}