如何阻止MudAutocomplete按回车选值时提交EditForm？

在Blazor的EditForm中使用MudAutocomplete组件时，通过回车键选择下拉选项后，表单会立即触发提交；但使用MudSelect组件时没有这个问题，需要阻止这种意外提交的情况。

问题原因 #

核心原因是MudAutocomplete的回车事件未被拦截，事件冒泡到EditForm后触发了表单的默认提交行为，而MudSelect内部已经处理了回车事件的传播，所以不会出现这个问题。

解决方法 #

方法一：直接在组件上阻止事件传播 #

给MudAutocomplete添加@onkeydown:stopPropagation="true"属性，直接拦截回车事件的冒泡，避免触发表单提交：

<EditForm Model="@Model" OnValidSubmit="OnValidSubmit">
    <MudFocusTrap DefaultFocus="DefaultFocus.FirstChild">
        <MudCard>
            <MudCardContent>
                <MudText Color="Color.Secondary">@Message</MudText>

                <MudSelect Dense="true" T="string" Label="SELECT - Coffee" Variant="Variant.Outlined">
                    <MudSelectItem Value="@("Tyrannosaur")" />
                    <MudSelectItem Value="@("Triceratops")" />
                    <MudSelectItem Value="@("Henon Rex")" />
                </MudSelect>
            
                <!-- 添加阻止事件传播的属性 -->
                <MudAutocomplete Variant="Variant.Outlined" T="string" Label="AUTOCOMPLETE - States" @bind-Value="Model.Code" SearchFunc="@Search1"
                                 ResetValueOnEmptyText="@resetValueOnEmptyText" 
                                 CoerceText="@coerceText" CoerceValue="@coerceValue"
                                 @onkeydown:stopPropagation="true" />

                <MudTextField Variant="Variant.Outlined" @bind-Value="Model.Description"
                              For="@(() => Model.Description)" Label="Description" />

            </MudCardContent>
            <MudCardActions>
                <MudButton Variant="Variant.Filled" Color="Color.Secondary" ButtonType="ButtonType.Submit">
                    Save
                </MudButton>
                <MudButton Variant="Variant.Filled" OnClick="Cancel">Cancel</MudButton>
            </MudCardActions>
        </MudCard>
    </MudFocusTrap>
</EditForm>

@code {
    public class MyModel
    {
        public string? Description { get; set; }
        public string? Code { get; set; }
    }

    public MyModel Model { get; set; } = new MyModel();

    private string Message { get; set; } = string.Empty;

    private bool resetValueOnEmptyText;
    private bool coerceText;
    private bool coerceValue;
    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

    private async Task<IEnumerable<string>> Search1(string value)
    {
        await Task.Delay(5);
        if (string.IsNullOrEmpty(value))
            return states;
        return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }

    private void OnValidSubmit(EditContext context)
    {
        Message = "Action submitted";
    }

    private void Cancel()
    {
        Message = "Action canceled";
    }
}

方法二：通过组件事件手动拦截 #

如果需要更精细的控制（比如只拦截回车事件），可以利用MudAutocomplete的OnKeyDown事件，在处理函数中手动阻止事件传播：

1. 在@code块中添加事件处理方法：

private void HandleAutocompleteKeyDown(KeyboardEventArgs e)
{
    // 仅拦截回车键的事件传播
    if (e.Key == "Enter")
    {
        e.StopPropagation();
    }
}

2. 在MudAutocomplete组件上绑定该事件：

<MudAutocomplete Variant="Variant.Outlined" T="string" Label="AUTOCOMPLETE - States" @bind-Value="Model.Code" SearchFunc="@Search1"
                 ResetValueOnEmptyText="@resetValueOnEmptyText" 
                 CoerceText="@coerceText" CoerceValue="@coerceValue"
                 OnKeyDown="HandleAutocompleteKeyDown" />

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