MudAutocomplete prevent submitting Form when selecting item with Enter-key

Question

I have a MudAutocomplete inside an blazor EditForm. When selecting an item with the Enter-key in the MudBlazor MudAutocomplete component, the form is also submitted inmediatly. How can I prevent this from happening.

<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>
            
                <div @onkeypress:stopPropagation="true" @onkeyup:stopPropagation="true">
                    <MudAutocomplete Variant="Variant.Outlined" T="string" Label="AUTOCOMPLETE - States" @bind-Value="Model.Code" SearchFunc="@Search1"
                                     ResetValueOnEmptyText="@resetValueOnEmptyText" 
                                     CoerceText="@coerceText" CoerceValue="@coerceValue" />
                </div>

                <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)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5);

        // if text is null or empty, show complete list
        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";
    }

Selecting an item in a MudSelect with the Enter-key does not have this effect.

You can find the snippet here https://try.mudblazor.com/snippet/mamnaxnYHpAaZKwY

Answer 1

I found that I can prevent the enter key from submitting the form by doing the following:

<EditForm EditContext="EditContext" onkeypress="return event.keyCode!=13">

This allows the Enter key to work for the AutoComplete control but will prevent the form from submitting when Enter is pressed. Note that it will also prevent form submission when other controls have the focus. In my use case, this was the desired behavior.