chanan / BlazorStrap

Bootstrap 4 Components for Blazor Framework
https://blazorstrap.io
The Unlicense
916 stars 157 forks source link

BSModal showing then closing during Async operations #613

Open Clive321A opened 1 month ago

Clive321A commented 1 month ago

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 commented 1 month ago

What version of .net and BlazorStrap?

Clive321A commented 1 month ago

Sorry ,yes its 5.2.100 on .net 8

jbomhold3 commented 1 month ago

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

Clive321A commented 1 month ago

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 commented 1 month ago

do you have a sample project I can run?

Clive321A commented 1 month ago

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 commented 1 month ago

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

jbomhold3 commented 1 month ago

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

jbomhold3 commented 1 month ago

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 commented 4 weeks ago

Awesome thanks!, this fixes my issues.