Blazor中按Tab键后清空MudTextField内容并保持焦点问题

针对你遇到的Tab键触发添加、清空输入框并保持焦点的问题，结合级联值传递和列表项为输入框的场景，以下是可行的实现方案：

核心问题分析 #

列表项均为输入文本框时，Tab键的默认行为是将焦点切换到下一个输入控件，这会覆盖你手动设置焦点的逻辑；同时@ref的焦点控制需要配合DOM更新时机和默认事件拦截才能生效。

实现代码 #

TheCodes 组件（包含级联值与列表展示） #

@using MudBlazor

<CascadingValue Value="MyModel">
    <InMyCode />
    <div class="mt-3">
        @foreach (var item in MyModel.CodeItems)
        {
            <MudTextField @bind-Value="item.Text" Margin="Margin.Dense" class="mb-2" />
        }
    </div>
</CascadingValue>

@code {
    public MyModel MyModel { get; set; } = new();

    public class MyModel
    {
        public List<CodeItem> CodeItems { get; set; } = new();
    }

    public class CodeItem
    {
        public string Text { get; set; } = string.Empty;
    }
}

InMyCode 组件（输入框逻辑实现） #

@using MudBlazor

<MudTextField @ref="_inputRef" 
              @bind-Value="_currentText" 
              OnKeyDown="HandleTabKey" 
              Placeholder="输入后按Tab添加"
              Margin="Margin.Dense" />

@code {
    [CascadingParameter]
    public MyModel MyModel { get; set; } = default!;

    private MudTextField<string>? _inputRef;
    private string _currentText = string.Empty;

    private async Task HandleTabKey(KeyboardEventArgs e)
    {
        if (e.Key != "Tab") return;

        // 阻止Tab的默认焦点切换行为
        e.PreventDefault();

        if (string.IsNullOrWhiteSpace(_currentText)) return;

        // 添加内容到列表
        MyModel.CodeItems.Add(new MyModel.CodeItem { Text = _currentText });
        // 清空输入框绑定值
        _currentText = string.Empty;
        // 强制组件更新，确保输入框DOM同步清空
        StateHasChanged();
        // 延迟设置焦点，等待DOM更新完成
        await Task.Delay(10);
        // 重新聚焦到输入框
        await _inputRef!.FocusAsync();
    }
}

关键注意点 #

• 拦截默认Tab行为：必须调用e.PreventDefault()，否则浏览器会自动将焦点跳转到列表中的下一个输入框，导致手动聚焦失效。
• 强制组件更新：清空输入框值后调用StateHasChanged()，确保绑定值的变更立即同步到DOM。
• 延迟聚焦：DOM更新需要短暂时间，直接调用FocusAsync()可能在输入框未完成清空渲染时执行，添加短延迟可避免此问题。
• @ref的有效性：确保_inputRef正确绑定到MudTextField，组件渲染完成后Ref会被赋值，因此可安全使用!断言。

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