Modal - Calls to ShowAsync followed by quick call to HideAsync leaves modal in bad state

[m-chandler]

Thank you for the work on this library, it's very useful.

I'm encountering an issue with BlazorStrap 5, something I don't recall happening with BlazorStrap 1.

Without delving into and defending my reasons for doing this, I've found that if I rapidly show / hide the modal, it's left in an indeterminate state somewhere between shown / hidden. This leaves the app well and truly broken, with an invisible modal covering the entire page.

It becomes a bit of an issue to try and coordinate the opening / closing of the modal external to this library. There doesn't seem to be a way to know whether or not a call to "HideAsync" or "ShowAsync" can be safely made. The only thing I can do currently is to ensure I don't call them within say 200ms of each other? I dislike this idea, as I don't know how many milliseconds is appropriate.

await Modal!.ShowAsync();
await Task.Delay(100); // 100 not ok, 200 ok.
await Modal!.HideAsync();

Full component:

<div>
    <BSModal IsStaticBackdrop="true" HasCloseButton="false" @ref="Modal">
        <Header>Modal Title</Header>
        <Content>This modal prompts the user to do something and closes when it is complete or times out.</Content>
    </BSModal>
    <BSButton Color="BSColor.Primary" OnClick="LaunchModal">Launch demo modal</BSButton>
</div>

@code {
    public BSModal? Modal { get; set; }
    public async Task LaunchModal()
    {
        await Modal!.ShowAsync();
        await Task.Delay(100); // 100 not ok, 200 ok.
        await Modal!.HideAsync();
    }
}

[jbomhold3]

What version are you using thought I had this fixed. As part of the testing, I automated the call to show/hide without delay and wasn't able to break it.

[m-chandler]

Hi @jbomhold3, I'm seeing it in 5.1.100-Beta2. I'm almost certain I'm seeing it in 5.0.106 (or something very similar), which is what led me to try 5.1.100-Beta2 .NET 6.0.8.

Sample project: https://github.com/m-chandler/blazorstrap-modal-bug

[jbomhold3]

Thought of a better fix in general. Now Show/Hide is held with a loop until the transition end is called or about 2 seconds have passed to keep it from getting locked. Now no delay is required at all.

[m-chandler]

Thanks!