JSException after clicking on a link inside SelectedTemplate

How to reproduce:

1. Create a blazor server-side project with the template in VS 2019 16.4(+)
2. Setup BlazoredTypeahead, like described in your documentation.
3. Add a razor page under “Pages”, e.g. “Issue.razor” with the following content:

@page "/issue"
<EditForm Model="Model">
    <BlazoredTypeahead 
                        SearchMethod="MySearchAsync"
                        @bind-Value="Model.Foo"
                        EnableDropDown="true"
                        placeholder="Search ..."
                        id="foo">
        <SelectedTemplate Context="item">
            <NavLink href="counter">@item</NavLink>
        </SelectedTemplate>
        <ResultTemplate Context="item">
            @item
        </ResultTemplate>
    </BlazoredTypeahead>
</EditForm>

@code {

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

    private Task<IEnumerable<string>> MySearchAsync(string input)
    {
        return Task.FromResult(Enumerable.Range(1, 3).Select(i => $"My Entry {i}"));
    }

    class MyModel
    {
        public string Foo { get; set; }
    }
}

1. Edit NavMenu.razor, add a new entry:

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="issue">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Test issue
            </NavLink>
        </li>

1. Start the app, go to the page “Test issue”
2. Select an item
3. Click on the link which was generated for the current item
4. -> Exception in BlazoredTypeahead`2.HandleClickOnMask:

Microsoft.JSInterop.JSException: 'element is null
setFocus@https://localhost:44356/_content/Blazored.Typeahead/blazored-typeahead.js:4:9
beginInvokeJSFromDotNet/r<@https://localhost:44356/_framework/blazor.server.js:8:31421
beginInvokeJSFromDotNet@https://localhost:44356/_framework/blazor.server.js:8:31390
C</e.prototype.invokeClientMethod/<@https://localhost:44356/_framework/blazor.server.js:1:19202
C</e.prototype.invokeClientMethod@https://localhost:44356/_framework/blazor.server.js:1:19173
C</e.prototype.processIncomingData@https://localhost:44356/_framework/blazor.server.js:1:17165
e/this.connection.onreceive@https://localhost:44356/_framework/blazor.server.js:1:10276
A</e.prototype.connect/</</</i.onmessage@https://localhost:44356/_framework/blazor.server.js:1:38091
'

Hint: If you look at the code of HandleClickOnMask, it waits 250 ms from the click to the javascript interop call. During this waiting time, the html element probably got removed at the browser side.

[chrissainty]

@sven-n Well, that’s handy! 😃 We’ll get this shipped soon.

[chrissainty]

Thanks for letting us know @trademark18. I’m working on a big update to Blazored Modal that I’m trying to get out this week. Once that is done I’ll get back over to Typeahead and look to ship a new version.