InputText component should provide a FocusAsync() method

The PR #23316 introduced ElementReference.FocusAsync() which is convenient to focus an html element. In my case I need to focus an <InputText> component in a form. There are 2 cases where I want to focus the element:

• In OnAfterRenderAsync when firstRender is true (similar to autofocus)
• On form submit to focus the element when the user doesn’t provide a value

I currently use a custom component that inherits from InputText and provide a FocusAsync method.

@inherits InputText
@inject IJSRuntime JSRuntime

<input @ref="inputElement"
       @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

@code {
    private ElementReference inputElement;

    public ValueTask FocusAsync()
    {
        // could be replaced with inputElement.FocusAsync() with the next release
        return JSRuntime.InvokeVoidAsync("BlazorFocus", inputElement);
    }
}

In the parent component I can use FocusAsync when needed which works well.

I think InputBase<T> or each component should have a FocusAsync method, so I don’t need to override components:

namespace Microsoft.AspNetCore.Components.Forms
{
    public class InputBase<T>
    {
+        public ValueTask FocusAsync();
    }
}

[pranavkm]

Do you think exposing an ElementReference to the wrapped HTML element

I’m slightly partial to not exposing the implementation details of components, but it’s unlikely we would have ever an InputText that does not use an input element. I think it should be fine to expose it. Could we call it something other than BaseElementReference? e.g. InputElementorElementReference(does that mean it's calledSelectElementforInputSelect`?)

class InputText
{
+ ElementReference InputElement { get; }
}

Usage:

@code{
  InputText inputText;
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
       if(firstRender)
            await inputText.InputElement.FocusAsync();
   }
}

[uabarahona]

Thank you so much for your help, I am going to proceed according with the discussion