Blazor Server中Input绑定值在OnKeyDown触发时延迟更新的问题

问题现象 #

• 输入'A'并按Tab时，Model.CodeInput为空；
• 输入'AB'并按Tab时，获取到的值为'A'；
• 输入'ABC'并按Tab时，获取到的值为'AB'。

问题根源 #

核心原因是Blazor事件触发顺序与双向绑定的更新时机不匹配：

1. @onkeydown事件在按键按下瞬间立即触发，此时输入框的DOM内容虽已变化，但Blazor的双向绑定机制还未将最新输入值同步到绑定的Model.CodeInput属性中；
2. Blazor默认的@bind-Value双向绑定，会在按键抬起（keyup）或输入框失去焦点时，才将输入框的DOM值同步到模型属性。

因此按下Tab触发OnKeyDown方法时，模型里的CodeInput还是上一次同步后的旧值，导致每次都慢一拍的延迟现象。

验证逻辑举例 #

• 输入'A'按Tab：keydown先触发，绑定值尚未从初始空字符串更新为'A'，所以添加空值；
• 输入'AB'按Tab：keydown触发时，绑定值停留在第一次输入的'A'，未同步最新的'AB'，所以添加'A'；
• 以此类推，每次Tab触发时拿到的都是上一轮的旧值。

可选解决思路 #

如果要解决该问题，常见两种方式：

1. 改用@keyup事件：等待按键抬起后执行逻辑，此时绑定值已完成同步；
2. 在keydown中直接从输入框组件取当前值：通过组件引用（@ref）读取输入框最新内容，不依赖模型绑定的延迟更新。

示例代码（第二种方式）：
Component1.razor：

<MudTextField 
    @bind-Value=Model.CodeInput
    @onkeydown="@(e => OnKeyDown(e, codeInput))" 
    @ref="codeInput" />

Component1.razor.cs：

public partial class Component1 
{
    [CascadingParameter]
    public MyModel Model { get; set; }
    
    private MudTextField<string> codeInput;

    public void OnKeyDown(KeyboardEventArgs e, MudTextField<string> input)
    {
        if (e.Code == "Tab")
        {
            Model.Codes.Add(input.Value);
        }
    }
}

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