[Bug]: ModalProvider does not always work

Valerio81 commented 7 months ago

Blazorise Version

1.5.1

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

I cannot reproduce this because it doesn't always happen. For the moment it has only happened to people who "installed" the PWA on the PC.

Steps to reproduce

///

What is expected?

I expect the modal to open

What is actually happening?

Sometimes when the button is clicked, nothing happens

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

yanezricardo commented 5 months ago

I am experiencing the same issue: the modal does not appear after updating from version 1.4.2 to 1.5.3. Can anyone help with what I should check, please? cleaning browser cache those not work.

github-actions[bot] commented 5 months ago

Hello @Valerio81, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

yanezricardo commented 5 months ago

Hi @stsrki, I created a demo project to reproduce the issue: https://github.com/yanezricardo/BlazoriseModalErrorDemo

I found a potential solution based on a comment in another issue. I added the following class to my site.css and the modal now functions as expected:

.modal.show { display: block; }

Thanks!

Valerio81 commented 5 months ago

Hi @stsrki, I created a demo project to reproduce the issue: https://github.com/yanezricardo/BlazoriseModalErrorDemo

I found a potential solution based on a comment in another issue. I added the following class to my site.css and the modal now functions as expected:

.modal.show { display: block; }

Thanks!

Thank you for this demo @yanezricardo 😊 @stsrki in my project the problem don't happens in a specified situation, but randomly

stsrki commented 5 months ago

Thank you for the repro.

In your code you didn't specify the blazorise bootstrap CSS file.

It must be as

@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace BlazoriseModalErrorDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+    <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />

    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazoriseModalErrorDemo.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png"/>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Can you please try adding <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" /> to your projects?

yanezricardo commented 5 months ago

Yes it works, thank you very much!

Valerio81 commented 5 months ago

I open my Modal using a method

private Task OpenFilter()
{
    if (this.ModalService != null)
    {
        return ModalService.Show<Components.Parts.Modals.ChartFilter>(x =>
            {
                x.Add(y => y.SelectedDates, this._selectedDates);
                x.Add(y => y.OnSuccess, DoOnSuccess);
            },
            new ModalInstanceOptions()
            {
                Animated = true,
                UseModalStructure = false
            });
    }
    return Task.CompletedTask;
}

with the ModalProvider defined in Routes.razor

[...]
<Blazorise.ModalProvider />
[...]

and all CSS added on my App.razor page

[...]
<link rel="stylesheet" href="_content/Blazorise/blazorise.min.css" />
<link rel="stylesheet" href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css" />
<link rel="stylesheet" href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css" />
[...]

stsrki commented 5 months ago

Can you add a query string to the links?

[...]
<link rel="stylesheet" href="_content/Blazorise/blazorise.min.css?v=1.5.3.0" />
<link rel="stylesheet" href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css?v=1.5.3.0" />
<link rel="stylesheet" href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css?v=1.5.3.0" />
[...]

I really suspect that the browser is caching an older version. And CTRL+F5 does not help all the times.

Valerio81 commented 5 months ago

Because I suspected the cache problem, I added a method to append an "hash" to all of my JS and CSS

This code [...] <link rel="stylesheet" href=@FileVersionhref("_content/Blazorise/blazorise.min.css") /> <link rel="stylesheet" href=@FileVersionhref("_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css") /> <link rel="stylesheet" href=@FileVersionhref("_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css") /> [...]

using this method private string FileVersionhref(string path) { return Fileversionprovider.AddFileVersionToPath(Program.RootPath, path); }

became this code [...] <link rel="stylesheet" href="_content/Blazorise/blazorise.min.css?v=eOt59ZYXwX8B9y8l2Se8MEctrFLQUV1RW2bRpVUGEsM" /> <link rel="stylesheet" href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css?v=hXnleQSBxDzH8DsKWNzeVIHl0QPSYVJ2g-5fQ90solg" /> <link rel="stylesheet" href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css?v=7viLDAQ1Hte0z3cVhE33JuBjs3qoGoUNImB6Zd9aYkE" /> [...]

But the version in query string not solve the occasionally bug.

stsrki commented 5 months ago

It would be hard to help without the reproducible. Especially if the issue is not consistent and only happens on random.

Are you still on 1.5.1?

Valerio81 commented 5 months ago

I'm on 1.5.3

Some users told me the bug happens on "installed" version of my PWA. It also happened 2 or 3 times in the web version (not installed).

After a page reload (or forced close) the modal works again

David-Moreira commented 5 months ago

That seems like caching behaviour, where your users already have downloaded a version that wasn't working. That can only get cleared once they reset the cache or the app goes online again and requests a fresh resource with the "new naming trick" ("hash") like you mentioned

github-actions[bot] commented 5 months ago

This is an automated message reminding that this issue is expecting the author's answer.

Megabit / Blazorise