[HxAutosuggest] [HxInputTags] Stop propagation of Enter key event when selecting an item

[TPIvan]

I have HxAutosuggest in a Form:

<EditForm Model="exampleModel" OnValidSubmit="HandleValidSubmit">   
    <HxAutosuggest Label="Employee"
                   Placeholder="Start typing to search by name"
                   TItem="EmployeeDto"
                   TValue="int?"
                   @bind-Value="@selectedEmployeeId"
                   DataProvider="ProvideSuggestions"
                   MinimumLength="0"
                   ValueSelector="employee => employee.Id"
                   TextSelector="employee => employee.Name"
                   ItemFromValueResolver="ResolveAutosuggestItemFromValue">
        <EmptyTemplate>
            <span class="p-2">Couldn't find any matching employee</span>
        </EmptyTemplate>
    </HxAutosuggest>    
    <p class="mt-3">Selected employee ID: @selectedEmployeeId</p>      
</EditForm>    

@code {
    private ExampleModel exampleModel = new();
    private int? selectedEmployeeId = 1;
    private void HandleValidSubmit()
    {
        System.Diagnostics.Debugger.Break();
    }

    private async Task<AutosuggestDataProviderResult<EmployeeDto>> ProvideSuggestions(AutosuggestDataProviderRequest request)
    {
        var matchingEmployees = await DemoDataService.FindEmployeesByNameAsync(request.UserInput, limitCount: 10, request.CancellationToken);
        return new AutosuggestDataProviderResult<EmployeeDto> { Data = matchingEmployees };
    }

    private async Task<EmployeeDto> ResolveAutosuggestItemFromValue(int? value)
    {
        if (value is null)
        {
            return null;
        }    
        return await DemoDataService.GetEmployeeByIdAsync(value.Value);
    }    
    private class ExampleModel {}
}

The problem is that when I select an item from the drop-down list using the arrow keys and then press the Enter key, the form is submitted automatically. This is not the expected behavior, as I only want to submit the form when I click the submit button. I think that HxAutosuggest should stop the propagation of the Enter key event when an item is selected, so that it does not trigger the form submission. Is there a way to achieve this or is it a bug?

[hakenr]

@TPIvan Are you sure? We are using HxAutosuggest in our applications on daily basis and I'm not able to reproduce the form submisssion with Enter key when selecting a suggested item from list.

... I will try to test your repro-code.

[hakenr]

In the end I was able to reproduce your issue using the code sample provider. Thank you!

In our code, we usually do not use <EditForm OnValidSubmit="..." /> but we use <HxButton EditContext="editContext" OnValidSubmit="..." /> instead, where it is not affected.

...will track this as a bug to resolve.

[TPIvan]

I observed this issue with HxInputTags in a rather complex form, so I created a code sample to isolate it. It seems to be reproducible. I found the testing project and I tried it again. The break in HandleValidSubmit was hit when I navigated by arrows in the suggest list and pressed enter. The component version was 4.0.?, so I updated it to the current 4.2.1, but the problem is still there. I can attach the whole project if needed.

[hakenr]

Notes for Future Fixes:

• It appears that the submit action is triggered by the input element, which retains focus while navigating through suggested items.
• Generally, pressing the Enter key on an input field submits the corresponding form.
• We'll likely need to manage the onkeydown event within HxAutosuggestInputInternal and prevent the default event behavior when the dropdown menu is open.

(If anyone is interested in addressing this and creating a pull request, your contribution would be greatly appreciated.)