blazor client awaited methods not executed after first await

Question

OnAfterRenderAsync exits before the all code executes. Only the first line I await is ever executed. If I add await Task.Delay(1000); as the first line of code then the code works correctly. If I add it as the last line of code then it has no affect and the code returns to only the first await executing.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JsRuntime.Create(Map, linkWithToken);
        foreach (var marker in Map.Markers)
        {
            await JsRuntime.AddMarker(Map, marker, new MouseEvent { LatLng = marker.Position });
        }
    }
}

I'm using .net 5 rc2 and VS Preview 4.

Answer 1

I am assuming you are trying to create the map by rendering it in an element that is in the Blazor component. When trying to run javascript that binds to an element you need to ensure the elements in the DOM exist prior to doing the interop call or your javascript will fail because the DOM elements don't exist. Calling await Task.Yield(); lets Blazor complete the render of the DOM elements to ensure they exist before trying to interact with them.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await Task.Yield(); //wait a tick for Blazor to generate the DOM elements
        await JsRuntime.Create(Map, linkWithToken);
        foreach (var marker in Map.Markers)
        {
            await JsRuntime.AddMarker(Map, marker, new MouseEvent { LatLng = marker.Position });
        }
    }
}