放弃对控制的关注

Question

我运行使用 Blazor Webassembly 遇到了一个奇怪的问题。我有一个包含 2 个文本框的组件。出于某种原因，如果我在第一个文本框中键入任何内容，然后尝试切换到第二个文本框或单击第二个文本框，我必须执行两次。这就像第一个选项卡或点击没有注册。在玩弄它之后，我能够以最少的方式重现这个问题。当我在控件上同时绑定模型并使用 @ref 属性时，似乎会出现此问题。

这是我的 .cshtml 文件：

@inject IJSRuntime JsRuntime
@page "/"


<div>
    <input class="form-control" id="first-text-box" type="text" @ref="TextBoxControl" @bind="_model.Box1" />
</div>
<div>
    <input class="form-control" id="second-text-box" type="text" @bind="_model.Box2" />
</div>


@code {
    private ElementReference TextBoxControl { get; set; }
    private readonly BoxClass _model = new BoxClass();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JsRuntime.InvokeVoidAsync("jsFunctions.focusElement", TextBoxControl);

        await base.OnAfterRenderAsync(firstRender);
    }
}

这里是 focusElement javascript 函数：

window.jsFunctions = {
    focusElement: function(element) {
        element.focus();
    }
};

最后，这里是 Fiddle 现场直播的问题：https://blazorfiddle.com/s/kph6msiv

就像我说的，只需在第一个文本框中输入内容，然后尝试使用 Tab 键或单击下一个文本框，您会发现需要输入两次。

Answer 1

每次呈现时您都在关注，这发生在 Blazor 数据绑定时，这发生在您退出控件时。

相反，仅当 firstRender 为 true

时才调用您的 JavsScript

放弃对控制的关注

Issue giving up focus on control

c#

blazor

blazor-client-side

blazor-webassembly