javascript - Blazor EditForm がデータ バインディングにフォーカスを失う

Question

ユーザーが上矢印または下矢印をクリックしたときに、新しいデータをフォームにロードする必要があります。そして期待されるのは、セルにフォーカスがあり、新しいデータがロードされた後もフォーカスを保持することです。

次のコードは、キーボード入力をトラップし、データ バインディングを使用してフォームに正しいレコードを読み込むことができます。しかし、新しいデータがバインドされるとすぐに、フォームはフォーカスを失います。

MyComponent.razor:

<span @onkeypress="@KeyHandler" @onkeydown="@KeyHandler">
    <EditForm Model="@CurrentRecord">
        <DataAnnotationsValidator />
        <ValidationSummary />
        @Content
    </EditForm>
</span>

@code {
[Parameter]
public RenderFragment Content { get; set; }
public List<MyModel> Data { get; set; } = new List<MyModel>();
private int currentIndex;

protected async Task KeyHandler(KeyboardEventArgs e)
{
    if (e.Key == "DownArrow") await LoadNextRecord();
}

async Task LoadNextRecord()
{
    CurrentRecord = Data.ElementAt(++currentIndex);
    // Form loses focus here!!
}
}

これで、単純な JavaScript を実装して、データが再バインドされたときに最初の要素にフォーカスできるようになりました。しかし、私の要件は、フォーカスをそのままにしておくことです。フォーム内のすべての要素に Id または @ref を割り当てることなく、フォーカスされた要素を取得してから再度フォーカスする一般的な方法を見つけることができませんでした。

この問題を解決する別の方法はありますか?