[Solved] Override 'Enter' choosing first item in AutoComplete-component

[Emil]

Hello,

I am using a TelerikAutoComplete-component as a search bar. 
When pressing 'Enter', the component fills the bar with the first item in the suggestions list, if any.

Is there a way to keep the suggestions list, and the option to click on any suggestion, but override control to make 'Enter' do something other than selecting the first item? 

Something like this:

    <div @onkeydown="@OnKeyDown">
        <TelerikAutoComplete Data="@Suggestions"
                             MinLength="3"
                             Rounded="@ThemeConstants.AutoComplete.Rounded.Full"
                             Size="@ThemeConstants.AutoComplete.Size.Large"/>
    </div>

    private void OnKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            Console.WriteLine("yo");
        }
    }

[Emil]

I ended up doing it this way. I would really like to see if there are any other options, as this comes with some drawbacks.
In the component, add a div around the AutoComplete:

<div class="search-container" @ref="_wrapper">

In code-behind of the component, add this:

    private ElementReference _wrapper;
    private IJSObjectReference jsModule { get; set; }
    private DotNetObjectReference<SearchBar> _dotNetRef;

    private async Task OnKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await Search();
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            _dotNetRef = DotNetObjectReference.Create(this);
            jsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./SearchBar.razor.js").AsTask();
            await jsModule.InvokeVoidAsync("attachEnterOverride", _wrapper, _dotNetRef);
        }
    }

    [JSInvokable]
    public Task OnEnter() => Search();

    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.InvokeVoidAsync("detachEnterOverride", _wrapper);
            await jsModule.DisposeAsync();
        }
        _dotNetRef?.Dispose();
    }

And then add a JS-file that matches the naming of your component:

const handlers = new WeakMap();

export function attachEnterOverride(el, dotNetRef) {
    const handler = e => {
        if (e.key !== "Enter") return;

        e.stopPropagation();
        e.preventDefault();
        dotNetRef.invokeMethodAsync("OnEnter");
    };
    handlers.set(el, handler);
    el.addEventListener("keydown", handler, true);
}

export function detachEnterOverride(el) {
    const h = handlers.get(el);
    if (h) el.removeEventListener("keydown", h, true);
}

There is probably a better way to do this, but it works for me.