BSModal Display Styling breaking

[kalshair]

When using BSModal, occasionally the modal's element display property will break during transitions and set it to 'None' while the modal is still marked as open, and it will not change back on its own when closing or reopening the modal unless I mash the button.

[jbomhold3]

What version?

[kalshair]

Version is 5.1.100-Preview2. Might be related to #542, as opening and closing the modal really quickly can consistently trigger the issue.

[Clive321A]

I have this issue as well, my case is very basic, I can make it happen if I spam the button, but when I release code to AWS and run, it always happens, when running locally, it only happens if I spam the button.

Have tried turning trim off during build

false

and also debug and release builds, same issue.

I tried installing 5.1.100-Preview2, but VS complains it cant find BSModal after I do, (even after clean rebuild etc)

<BSButton Color="BSColor.Primary" OnClick="@(()=>Refresh())">Refresh</BSButton>

<BSModal @ref="WaitPopup" IsCentered="true">
    <Header>Wait</Header>
    <Content>      
            <div>Processing...</div>
    </Content>
    <Footer Context="modal"></Footer>
</BSModal>

 public async Task Refresh()
    {
        try
        {
            await WaitPopup.ShowAsync();
            await Load();
        }
        finally
        {
            await WaitPopup.HideAsync();
        }

    }

Browser is unresponsive due to the DIV being left after Modal closed.

[jbomhold3]

Basically completely rewriting this base class. Adding a real eventque fired only after a render Also created a new function in the javascript WaitForTransitionEnd this will hold C# in place until it completes or times out. Lets me do away with a lot of the back and forth between the two. Both of these are what is causing the issue.

[kalshair]

Basically completely rewriting this base class. Adding a real eventque fired only after a render Also created a new function in the javascript WaitForTransitionEnd this will hold C# in place until it completes or times out. Lets me do away with a lot of the back and forth between the two. Both of these are what is causing the issue.

Wonderful! Could you give a ballpark estimate on when this fix will go live?

[jbomhold3]

A few days if I beat thanksgiving, if not a few days after that.

[jbomhold3]

I lied up for testing https://www.nuget.org/packages/BlazorStrap/5.1.100-Preview3. Will likely switch all the javascript over before the main release.

[Clive321A]

Many thanks, I updated to the Preview3 nuget, however like with Preview2, I cant build anymore, have tried all the usual clean, rebuild, restart VS etc

Severity    Code    Description Project File    Line    Suppression State
Error (active)  CS0246  The type or namespace name 'BSModal' could not be found (are you missing a using directive or an assembly reference?)       c:\Repos\iUWWorkbench\Client\Components\ErrorPopup.razor    13  

Severity    Code    Description Project File    Line    Suppression State
Error (active)  RZ9991  The attribute names could not be inferred from bind attribute 'bind-Value'. Bind attributes should be of the form 'bind' or 'bind-value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc.     c:\Repos\iUWWorkbench\Client\Pages\Application\UpdateApplicantCustomData.razor  67  

Severity    Code    Description Project File    Line    Suppression State
Error (active)  CS0103  The name 'BS' does not exist in the current context     c:\Repos\iUWWorkbench\Client\Pages\Application\UpdateApplicantCustomData.razor  66  

Switching back to the current package removes these errors and it builds. Has there been some other changes in preview packages? that i need to add something into my _imports for ?

This is in .NET7, but I have also switched back to my .NET6 branch and same issue

[kalshair]

First, are you using the stable version or the Beta/Preview versions? If it's the stable and you're attempting to update to the Beta or Preview, there's another required Nuget package and additional required steps. Those steps are pinned in Issues.

As for whether my issue is fixed, it definitely is. Thank you so much, @jbomhold3 !

[jbomhold3]

Make sure you update both packages

[jbomhold3]

@CliveBennett install latest packages https://www.nuget.org/packages/BlazorStrap https://www.nuget.org/packages/BlazorStrap.V5

Update your @using BlazorStrap to @using BlazorStrap.V5

[Clive321A]

Thanks, sorry I missed that pinned issue, can compile and build now.

This is not quite fixed for me, the issue of the div freezing the screen is gone, however on occasion the Modal does not close when calling HideAsync(), I do see in the console when this occurs "Got Here" which I presume is some debugging?

im doing this from a button click, where Load is a API call, if I check the network in browser the call is succeeding.

 public async Task Refresh()
    {
        try
        {
            await WaitPopup.ShowAsync();
            await Load();
        }
        finally
        {
            await WaitPopup.HideAsync();
        }
    }

[Clive321A]

Its a time thing, that Load() is running very quick, I added a Task.Delay and it now runs ok

  public async Task Refresh()
    {
        try
        {
            await WaitPopup.ShowAsync();
            await Load();
            await Task.Delay(2000);
        }
        finally
        {
            await WaitPopup.HideAsync();
        }

    }

[jbomhold3]

Sadly doing the event working how it is now it works great for keeping things going right but await show doesn't really await for the moment everytime you call ShowAsync you should consider it fire and forget. There should be a way to fix that issue but don't have it applied. Think someone a pr for it will double check

[Clive321A]

Right so what's happening is the Hide is being called before the Show has completed, and hence doing nothing.

[jbomhold3]

Sorry about the quick publish, but preview4 is going up. Includes Show/Shown Hide/Hidden events. Plus ShowAsync/HideAsync should respect being awaited now.

[Clive321A]

I removed the Task.Delay() above, and this now works exactly as I would expect. Can spam the button no problems as well.

Thank you for the quick turnaround.

[Clive321A]

Hi, I believe that change caused a regression for "RefreshAsync()" I have a modal like this, _waitMessage is being updated in a loop from a API call, the Modal displays fine, but the contents of the modal dont update

<BSModal HasCloseButton="false" IsStaticBackdrop = "true" @ref="WaitPopup" IsCentered="true">
    <Content>
        <BSSpinner>Rule loading</BSSpinner>
        @_waitMessage
    </Content>
</BSModal>

 private async Task LoopWhileWaiting()
    {
        await Task.Delay(2000);
        var result = await client.CheckRuleStatus(_identifier);
         if (result.Result.RuleLoadSucess)
          {
            return;
          }
       _waitMessage = result.Result.Status;
        await WaitPopup.RefreshAsync();

       return await LoopWhileWaiting();
}

[jbomhold3]

Opps faulty programmer error.

[Clive321A]

Great thanks, let me know when its been pushed into preview and Ill test it

[Clive321A]

With Preview V6, I get an issue with the context in the BSModal IF I use another control or something in the Content that also has a Context

Table (below) also uses context, so in order to make things compile I had to set Context of the Content in BSModal to something else ie Context="abc"

Was that intentional? It broke quite a few of my components, I can change to add the Context , but wasnt sure if this was supposed to be like this or not

<BSModal HasCloseButton=true DataId="model5" @ref="VersionsPopup" IsCentered="true">
    <Header>Download Previous Versions</Header>
    <Content Context="abc">
        <Table TableClass="table table-light table-striped table-bordered table-hover table-responsive"
               TableItem="ExtractCreatedFile"
               Items="CurrentExtract.Versions"
               PageSize="5">

[jbomhold3]

Yes, I should have noted that in the release notes and will for the official release. It was done to give control over the modal from the context as well. I want to avoid people having to take a reference to do basic controls over the modal.

[Clive321A]

Thanks, I updated to that, and all works well including Text updating in Modal.