components-reconnect-modal appears underneath <dialog> elements

[mrpmorris]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

When a Blazor server app loses connectivity, the components-reconnect-modal obscurer doesn't obscure <dialog> elements that have had .showModal() called on them.

Expected Behavior

It should also obscure <dialog> elements - perhaps convert it into a <dialog> that is shown modally?

Steps To Reproduce

1. New Blazor Server App
2. Add wwwroot/index.js

window.showModal = function (id) {
	const elem = document.getElementById(id);
	elem.showModal();
}

3. In App.razor, after the <script src="_framework/blazor.web.js"></script> add <script src="/index.js"></script>
4. Change Home.razor to the following

@page "/"
@inject IJSRuntime JSRuntime

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<dialog id="modal">
    <h1>Hello</h1>
</dialog>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
            await JSRuntime.InvokeVoidAsync("showModal", "modal");
    }
}

5. Run the app using dotnet watch
6. Wait for the app to start and for the dialog to appear.
7. Close the dotnet watch app and watch the page show it has lost its connection.

Exceptions (if any)

No response

.NET Version

8.0.36

Anything else?

[javiercn]

@mrpmorris thanks for contacting us.

I imagine this is "by design" as this component predates the dialog element and dialog elements contain special logic to render on top of everything else, which makes solving this hard/impossible.

I don't think we can make the UI a dialog element itself because I doubt it'll render if another modal dialog is already opened.

[mkArtakMSFT]

Thanks @javiercn. @mrpmorris I'm going to park this in the Backlog for now. Doesn't seem to be too critical for now.

[mrpmorris]

With the creation of <dialog> and the number of years it has now been in all the browsers perhaps this should now be a feature request?

If a dialog is open and you call showDialog on another then it will show on top, so there is no problem there.

I think even having a class "blazor-circuit-disconnected" added to the

would be sufficient, because then I could use CSS

In the meantime, I have this workaround...

body.blazor-server-disconnected dialog {
   opacity: 0;
}

new MutationObserver(() => {
   const modal = document.getElementById("components-reconnect-modal");
   if (modal) {
      document.body.classList.add("blazor-server-disconnected");
   } else {
      document.body.classList.remove("blazor-server-disconnected");
   }
})
.observe(document.body, { childList: true, subtree: false });

[javiercn]

We fixed this in 10.0 when we have moved the reconnect modal into the template (and made it a dialog element).

We don't plan to backport a fix for this.