BSModal showing then closing during Async operations

[Clive321A]

Hi, Has there been a change to the way BSModals show/hide in the last few weeks, ive picked up a regression issue, where the BSModal displays, then I do a async operation to a API and its closing by itself.

To keep it open I have to call the ShowAsync twice

<BSModal DataId="model4" @ref="WaitPopup" IsCentered="true">
    <Content>
        @if (!string.IsNullOrEmpty(waitPopupMessage))
        {
            <div>@waitPopupMessage</div>
        }
        else
        {
            <div>Processing...</div>
        }
    </Content>
</BSModal>

  private async Task LoadFiles(InputFileChangeEventArgs e)
  {

      try
      {
          waitPopupMessage = "Uploading Extract Definition";

          //Opens and closes immediately, does flash on screen initially
          await WaitPopup.ShowAsync();

          //Need to do it twice for it to stay open
          await WaitPopup.ShowAsync();

          //Simulate API
          await Task.Delay(2000);


      }
      finally
      {
          waitPopupMessage = "";
          await WaitPopup.HideAsync();
      }
  }

[jbomhold3]

What version of .net and BlazorStrap?

[Clive321A]

Sorry ,yes its 5.2.100 on .net 8

[jbomhold3]

Ok, I will test and fix it asap in the middle of a move.

[Clive321A]

Hi, did a bit more digging on this, have found that, this works fine in Windows and Linux docker containers

 <PackageReference Include="BlazorStrap.V5" Version="5.1.102.51723" />
 <PackageReference Include="BlazorStrap" Version="5.1.102.51923" />

And this works fine in Windows, but doesn't work correctly in Linux docker containers.
The observed difference is that you have to double call ShowAsync(), and also when its displaying you don't get the dark background when its modal. (I think that's the IsStaticBackdrop=true)

<PackageReference Include="BlazorStrap.V5" Version="5.2.100" />
<PackageReference Include="BlazorStrap" Version="5.2.100.61524" />

Dockerfile is using this
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS base

[jbomhold3]

do you have a sample project I can run?

[Clive321A]

Ive been trying, Its hard to track down what specifically causes it. The best I can see is that if you trigger a BSModal from a InputFile it doesnt like to stay open.

But I think this is a different issue, as this issue also exists on the older versions

(Go to the Counter), if you select to Upload a file,. the BSModal doesnt stay open, The static backdrop is missing as well.

BlazorApp10.zip

[jbomhold3]

Just got settled into my new place. Will debug this tomorrow

[jbomhold3]

your missing the <BSCore/> for the backdrop. Put it anywhere in the main layout after @Body. Still looking into other issue

[jbomhold3]

Issue Found
Cause: The Javascript interop model open function hides other open models by default, which is how the toggle between models works. However, selecting a file, clicking to show files, or closing the file menu triggers a rerender. That render created a race condition with ShowAsync, causing the interop to think there was another model open when it was itself and closing it.

Fix: Models with the same data-id (this is auto-generated if not provided.) are now unable to close themselves while showing

Three things from your sample provided

1. Remove ref to blazorstrap.js from your HTML file unless you're using something in the old Interop
2. Add <BSCore/> to your main layout
3. Check file count on LoadFiles return if empty.

[Clive321A]

Awesome thanks!, this fixes my issues.