Unable to reliably show Modal within OnAfterRenderAsync (first render)

[m-chandler]

Describe the bug

I have a requirement to conditionally show a modal immediately when a component is rendered.

As per the Blazor component lifecycle, the last callback I can hook into is OnAfterRenderAsync. I'm trying to show the modal in this callback. It is unreliable. In my example below I can't get the modal to show at all. If I add a Task.Delay(500) it will work. It is as though the Modal has not finished rendering, or there is some JS initialisation still going on in the background?

To Reproduce

The below component should show the modal immediately when the component is rendered, but it does not. If I click the button to Show Modal, it is shown.

Please note that this is just an example. My actual use case involves conditional logic within the OnAfterRenderAsync callback.

I have tried also using the OnAfterRender (non async) callback.

@using BootstrapBlazor.Components

<div>
    <h1>Home</h1>
    <Modal @ref="Modal" IsFade="false">
        <ModalDialog Title="Modal Title">
            <BodyTemplate>Modal Body</BodyTemplate>
        </ModalDialog>
    </Modal>
    <button @onclick="() => Modal!.Show()">Show Modal</button>
</div>

@code
{
    public Modal? Modal { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Modal!.Show();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

If I wrap the Modal!.Show(); in an async task it is more reliable (particularly in this example), but I have found that this still doesn't work reliably in my application. Presumably if there is other CPU intensive activities going on, 500ms may not be enough. Hence relying on some arbitrary delay isn't suitable.

Task.Run(async () =>
{
    await Task.Delay(500);
    await Modal!.Show();
});

Exceptions (if any)

n/a

Further technical details

• BootstrapBlazor version 7.0.3
• Include the output of dotnet --info

.NET SDK:
 Version:   7.0.100
 Commit:    e12b7af219

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.22621
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\7.0.100\

Host:
  Version:      7.0.0
  Architecture: x64
  Commit:       d099f075e4

.NET SDKs installed:
  5.0.302 [C:\Program Files\dotnet\sdk]
  5.0.408 [C:\Program Files\dotnet\sdk]
  6.0.111 [C:\Program Files\dotnet\sdk]
  6.0.202 [C:\Program Files\dotnet\sdk]
  6.0.203 [C:\Program Files\dotnet\sdk]
  6.0.306 [C:\Program Files\dotnet\sdk]
  7.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 7.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 7.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 7.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
  x86   [C:\Program Files (x86)\dotnet]
    registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
  Not set

global.json file:
  Not found

Learn more:
  https://aka.ms/dotnet/info

Download .NET:
  https://aka.ms/dotnet/download

• The IDE (VS / VS Code/ VS4Mac) you're running on, and its version: VS Pro 2022 17.4.0.

[ArgoZhang]

@m-chandler thank you for contacting us. yes, this issue is caused by the page OnAfterRenderAsync before the component OnAfterRenderAsync. it designed by Microsoft blazor

The Modal use a dynamic load javascript module in the base class BootstrapModuleComponentBase OnAfterRenderAsync method.

https://github.com/dotnetcore/BootstrapBlazor/blob/main/src/BootstrapBlazor/Components/BaseComponents/BootstrapModuleComponentBase.cs#L85

The Modal is not ready for the show in the page OnAfterRender lifecycle. so add Task.Delay will be worked.

[m-chandler]

Hi @ArgoZhang thanks for the quick response.

I did mention the Task.Delay is also unreliable. I've even tried 1 second; it still sometimes isn't enough. E.g. if it's running on a phone that is CPU constrained. Specifically I'm seeing the issue on our build server trying to run multiple E2E tests in parallel, the CPU is choked up.

Could the Modal or base class provide some callback that is invoked when it's "ready" to be interacted with (show)?

You must agree that a Task.Delay with an arbitrary time is less than ideal.

[ArgoZhang]

@m-chandler sure! this is a good idea. I am working on it.

[ArgoZhang]

@m-chandler hi, I have released the version 7.0.6-beta01. Add a FirstAfterRenderCallbackAsync parameter on Modal component.

@page "/"
@using BootstrapBlazor.Components
@using System.Diagnostics.CodeAnalysis;

<div>
    <h1>Home</h1>
    <Modal @ref="Modal" IsFade="false" FirstAfterRenderCallbackAsync="FirstAfterRenderCallbackAsync">
        <ModalDialog Title="Modal Title">
            <BodyTemplate>Modal Body</BodyTemplate>
        </ModalDialog>
    </Modal>
    <button @onclick="() => Modal.Show()">Show Modal</button>
</div>

@code
{
    [NotNull]
    public Modal? Modal { get; set; }

    private async Task FirstAfterRenderCallbackAsync()
    {
        await Modal.Show();
    }
}

Please have a test for this if you are free.

[m-chandler]

Thanks @ArgoZhang! I will test this tomorrow.

[m-chandler]

@ArgoZhang looks good to me, thanks! I see this is in 7.0.6 now, I'll update to that.