[SOLVED] How to set focus on TextEdit component?

[KroMignon]

I try to use .NET 5 FocusAsync() feature with TextEdit.

<TextEdit @ref="textInput" />

@code {
    ElementReference textInput;

    private async Task SetFocus()
    {
          await textInput.FocusAsync();
    }
}

But got the following error on compilation:

Cannot implicitly convert type 'Blazorise.TextEdit' to 'Microsoft.AspNetCore.Components.ElementReference'

Is there another way to set focus to TextEdit instances?

[stsrki]

First you need to fix your code

<TextEdit @ref="textEdit" />

@code {
    TextEdit textEdit;

    private async Task SetFocus()
    {
          await textEdit.FocusAsync();
    }
}

For above example and 0.9.2.x version you can use textInput.Focus().

And for 0.9.3 you can use:

• textEdit.Focus()
• textEdit.FocusAsync()
• <TextEdit Autofocus="true" />

[KroMignon]

@stsrki
Thanks for your reply, I have misunderstood how .NET 5 SetFocus is working.
My comprehension was that every Blazor/Razor component has as base type ElementReference.

About release 0.9.3, is there a roadmap when it will be "ready for publication"?

[KroMignon]

@stsrki
It does not work with release 0.9.2.5, I have the following error:

Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.

[stsrki]

From where do you call SetFocus()? Is it from OnInitializedAsync method?

[KroMignon]

@stsrki

Here is a minimal code extract from my component.
The idea is to update the button text with user input.

<Button Outline="false"  Disabled="EditMode" @onclick="@(() => OnTextEdit(true))">@buttonText</Button>

@if (EditMode)
{
    <Row>
        <Column ColumnSize="ColumnSize.IsFull" Margin="Margin.Is2.OnY">
            <TextEdit @ref="textInput" @bind-Text="@currentEdit"/>
            <Button Color="Color.Primary" @onclick="@(() => OnTextEdit(false))" Margin="Margin.Is2">Store</Button>
        </Column>
    </Row>
}
@code {

    [Parameter]
    public string UserAnswer { get; set; } = "";
    [Parameter]
    public EventCallback<string> UserAnswerChanged { get; set; }

    private bool EditMode = false;
    TextEdit textInput;

    string currentEdit="";
    string buttonText = "___";

    protected override void OnInitialized()
    {
        if(UserAnswer.Length == 0)
            buttonText = "____";
    }

    private async Task OnUserAnswerChanged(string answer)
    {
        UserAnswer = answer;
        await UserAnswerChanged.InvokeAsync(answer);
    }

    private async Task OnTextEdit(bool doEdit)
    {
        if(EditMode != doEdit)
        {
            EditMode = doEdit;
            if(EditMode)
            {
                currentEdit = UserAnswer;
            }
            else
            {
                // store anwser
                UserAnswer = currentEdit.Trim();
                if (UserAnswer.Length == 0)
                    buttonText = "____";
                else
                    buttonText = UserAnswer;
            }
            await InvokeAsync(() => StateHasChanged());
            if (EditMode)
                textInput.Focus();
        }
    }
}

[stsrki]

Aaahhh, the infamous @if ( ) statement in Blazor. What does it mean? Well, you must know that for @ref to work, the element must be rendered inside of DOM. So when you place anything under the @if ( ) it does not exist until Blazor renders it.

And that is exactly what is happening here. You're trying to do textInput.Focus(); but since textInput is still not rendered it will be null.

[stsrki]

PS. Button has a Clicked event so you should always use it instead of @onclick.

Example

<Button Outline="false"  Disabled="EditMode" Clicked="@(() => OnTextEdit(true))">@buttonText</Button>

[stsrki]

Solution

<Button Outline="false" Disabled="EditMode" Clicked="@(() => OnTextEdit(true))">@buttonText</Button>

@if ( EditMode )
{
    <Row>
        <Column ColumnSize="ColumnSize.IsFull" Margin="Margin.Is2.OnY">
            <TextEdit @ref="textInput" @bind-Text="@currentEdit" />
            <Button Color="Color.Primary" Clicked="@(() => OnTextEdit(false))" Margin="Margin.Is2">Store</Button>
        </Column>
    </Row>
}
@code {

    [Parameter]
    public string UserAnswer { get; set; } = "";
    [Parameter]
    public EventCallback<string> UserAnswerChanged { get; set; }

    private bool EditMode = false;
    TextEdit textInput;

    string currentEdit = "";
    string buttonText = "___";

    bool needFocus;

    protected override void OnInitialized()
    {
        if ( UserAnswer.Length == 0 )
            buttonText = "____";
    }

    protected override Task OnAfterRenderAsync( bool firstRender )
    {
        if ( needFocus )
        {
            InvokeAsync( () => textInput.Focus() );

            needFocus = false;
        }

        return base.OnAfterRenderAsync( firstRender );
    }

    private async Task OnUserAnswerChanged( string answer )
    {
        UserAnswer = answer;
        await UserAnswerChanged.InvokeAsync( answer );
    }

    private async Task OnTextEdit( bool doEdit )
    {
        if ( EditMode != doEdit )
        {
            EditMode = doEdit;
            if ( EditMode )
            {
                currentEdit = UserAnswer;
            }
            else
            {
                // store anwser
                UserAnswer = currentEdit.Trim();
                if ( UserAnswer.Length == 0 )
                    buttonText = "____";
                else
                    buttonText = UserAnswer;
            }

            if ( EditMode )
                needFocus = true;

            await InvokeAsync( () => StateHasChanged() );
        }
    }
}

[KroMignon]

@stsrki

Thanks! You definitively saved my day!

A muss admits that, after sending my code, I supposed that the @if statement will be the reason why it not works.
Now I know why!

Many thanks for your time and for the very comprehensive explanations and the solution.

[stsrki]

You're welcome :)