Blazor需两次调用函数才能选中文本片段？原因解析

你遇到的问题核心在于Blazor的状态更新与DOM同步的异步特性，以及浏览器事件处理的时序冲突：

为什么调用两次才生效？ #

1. DOM更新延迟：当你修改CurrentValue后，Blazor并不会立即更新输入框的DOM内容，而是将组件标记为"需要渲染"，等待下一轮渲染周期才会同步DOM。第一次调用SelectionPartOfText时，输入框的DOM值还是旧的，或者DOM尚未完成更新，导致选中文本的操作无法作用到最新的内容上。第二次调用时，DOM已经完成更新，选中操作才能生效。
2. 浏览器默认行为干扰：即使你设置了preventDefault = true，浏览器的按键事件可能仍有后续的默认逻辑（比如光标自动移动到文本末尾），会覆盖你的选中操作。第二次调用相当于重新执行选中，覆盖了浏览器的默认行为。

解决方案 #

方案1：等待Blazor完成DOM渲染后再调用JS #

在修改CurrentValue后，强制触发状态变更并等待DOM更新完成，再执行一次选中操作即可：

private async Task OnKeyDownEvent(KeyboardEventArgs e)
{
    preventDefault = true;

    switch(e.Code)
    {
        case "ArrowUp":
            CurrentValue = CurrentValue?.AddDays(1);
            break;
        case "ArrowDown":
            CurrentValue = CurrentValue?.AddDays(-1);
            break;
    }

    // 通知Blazor需要重新渲染
    StateHasChanged();
    // 让出线程，让Blazor完成DOM同步
    await Task.Yield();

    // 现在仅需调用一次即可生效
    await JsRuntime.InvokeVoidAsync("SelectionPartOfText", ReferenceToInputDate, 0, 2);
}

方案2：在JS中延迟执行选中逻辑 #

修改你的SelectionPartOfText JS函数，用requestAnimationFrame等待浏览器下一次重绘，确保DOM已更新后再执行选中：

function SelectionPartOfText(inputElement, start, end) {
    // 等待DOM完成更新后再执行选中
    requestAnimationFrame(() => {
        inputElement.focus();
        inputElement.setSelectionRange(start, end);
    });
}

修改后，C#中只需调用一次JsRuntime.InvokeVoidAsync即可生效。

内容的提问来源于stack exchange，提问作者ksiegowybk