Blazor的FocusAsync不总是设置焦点

Question

我无法制作.NET 6的大型异步方法。

我可以告诉我，异步仅在组件值不为null时起作用。该模型确保组件值不是零。

模型：

namespace BlazorAppWithService.Models;

public class TagModel
{
    public string? TagName { get; set; } = "";
}

Blazor标记：

<EditForm Model="@newTag" OnValidSubmit="AddTag">
    <InputText @ref="ele "@bind-Value="newTag.TagName"></InputText>
    <button type="submit">Add tag</button>
</EditForm>

此代码：

@code {
    InputText ele;

    private List<TagModel> tagList = new List<TagModel>();

    private TagModel newTag = new TagModel();


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) 
            if (ele.Element != null)
                await ele.Element.Value.FocusAsync();
    }

    private async void AddTag()
    {
        tagList.Add(newTag);
        newTag = new TagModel();
        if (ele.Element != null)
        {
            await ele.Element.Value.FocusAsync();            
        }
    }
}

此代码正确将重点放在第一个渲染上，但是当调用AddTag（）方法时，组件并未集中。

FWIW，这也不能定位光标：

<button @onclick="() => ele.Element.Value.FocusAsync()" type="submit">Add tag</button>

大火：使困难的事情变得容易，而且很难！

Answer 1

要解释引擎盖下的focusAsync 正在调用javaScript，但是在这种情况发生后，Blazor正在重新启动。因此，您需要在类似的onFterRenderAsync方法中调用focusAsync：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await ele.Element.Value.FocusAsync();
}

focustAsync使用JavaScript并不是很明显，但这就是为什么它没有的原因工作。文档中有有关调用JavaScript的文档的摘录：

延迟JavaScript Interop呼叫，直到保证工作的点，覆盖onfterRender {async} lifeCycle
事件。仅在应用程序完全渲染后才调用此事件。

source

Answer 2

对我来说，问题是目标要素不在那里。想象一下这种情况：

if (ShowInput)
{
    <input @ref="MyInput" />
}

@code{
    bool ShowInput { get; set; }
    ElementReference? MyInput { get; set; }
    async Task SomeOperation()
    {
        ShowInput = true;
        //Here, Blazor should render the input, but has not yet. Currently there is no input.
        await MyInput.FocusAsync();
    }
}

因此，我们始终以某种方式呼叫focustAsync完全呈现元素。注意Editform之类的容器组件可能会影响其孩子的渲染行为。 （我认为这是您问题的根源。）