Blazor:如何在EditForm之后保持对输入的关注.模型的变化

Question

EditForm元素在模型更改时呈现它的子内容。作为副作用，活动的(聚焦的)输入元素从DOM中移除，焦点丢失。

<EditForm Model="model">
<!-- Focus will not be retained when model changes  -->
<InputText @bind-Value="model.Name" /> 
...dozen of other inputs
</EditForm>

参见演示:https://blazorrepl.com/repl/mbbEcJaB56u8TmG400

当重新呈现EditForm时，我希望将焦点保留在相同的输入上-无论输入有焦点。

当重新呈现EditForm时，我如何保持对相同输入的关注?

理想情况下，我有一个通用的解决方案，因为我有许多形式与许多不同的输入在我的项目

---

编辑:我知道如何通过使用ElementRef.Focus()或JS以编程方式将焦点设置为元素。

这个问题是关于在用户关注的任何输入中保持焦点。

Answer 1

在有人提出更好的解决方案之前，以下方法对我有效:

//restore focus after EditForm.Model changes, since the elements are removed from DOM 
//when active element is removed from DOM, `focusout` event bubbles up to document
document.addEventListener('focusout', (evt) => {
if (evt.target.form && evt.target.form.parentElement) {
//parent of the EditForm will stay connected to DOM.
const parent = evt.target.form.parentElement; //get editform's
let elementSelector = evt.target.tagName;
if (evt.target.name) {
elementSelector += `[name='${evt.target.name}']`;
}
//we will need this to find new version of element after DOM updates
const elementPosition = [...parent.querySelectorAll(elementSelector)].indexOf(evt.target);
setTimeout(() => {  //wait for rerender
// check whether the original active element was removed from DOM
if (document.activeElement == document.body && !evt.target.isConnected) {
const rerenderedElement = parent.querySelectorAll(elementSelector)[elementPosition];
if (rerenderedElement) {
rerenderedElement.focus();
}
}
}, 1);
}
});

Answer 2

你还没问就回答了自己的问题。

活动的(聚焦的)输入元素从DOM中移除，焦点丢失。

当EditForm被重新渲染时，我如何保持对相同输入的关注?

你看到了吗?你不能。你能做的最好的事情就是将焦点设置在新元素上。

一般的方法是跟踪最近集中的输入，并在需要时使用上面注释中提供的工具将焦点恢复到该输入的新版本。