Проблема отказа от контроля

У меня возникла странная проблема при использовании Blazor Webassembly. У меня есть компонент с двумя текстовыми полями. По какой-то причине, если я ввожу что-нибудь в первое текстовое поле, а затем пытаюсь перейти ко второму текстовому полю или щелкнуть во втором текстовом поле, мне придется сделать это дважды. Как будто первая вкладка или клик не регистрируются. Поигравшись с этим, я смог минимально продублировать проблему. Проблема возникает, когда у меня есть привязка модели к элементу управления и я использую атрибут @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);
    }
}

Вот функция javascript focusElement:

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

Наконец, вот сценарий проблемы, чтобы увидеть, как это происходит вживую: https://blazorfiddle.com/s/kph6msiv

Как я уже сказал, просто введите что-нибудь в первое текстовое поле, затем попробуйте перейти на вкладку или щелкнуть следующее текстовое поле, и вы увидите, что вам нужно сделать это дважды.