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, чтобы сфокусировать первый элемент при повторной привязке данных. Но мое требование - сохранять фокус там, где он есть. Мне не удалось найти общий способ получить сфокусированный элемент и затем перефокусировать его без необходимости назначать идентификатор или @ref для каждого элемента в моей форме.

Есть ли другой способ решить эту проблему?

Answer 1

Есть ли другой способ решить эту проблему?

Нет, нет... Нет универсального способа сделать это, не сейчас и, вероятно, не в ближайшем будущем.

В настоящее время вы можете установить фокус ввода в Blazor максимум следующим образом:

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

Обратите внимание, что приведенный выше фрагмент кода работает только в Asp.Net Core 5.0 (предварительная версия).

Единственное решение, которое я могу предложить, - это разработать способ узнать, какой элемент ввода был в фокусе последним, а затем перефокусировать его из методов OnAfterRender/Async. Вам нужно будет применить директиву @ref к каждому из ваших элементов ввода или атрибуту id. Нет другого способа сделать это.