Open mrpmorris opened 1 week ago
@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.
Thanks @javiercn. @mrpmorris I'm going to park this in the Backlog for now. Doesn't seem to be too critical for now.
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 CSSIn 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 });
Is there an existing issue for this?
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
<script src="_framework/blazor.web.js"></script>
add<script src="/index.js"></script>
Hello, world!
Welcome to your new app.
@code { protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); if (firstRender) await JSRuntime.InvokeVoidAsync("showModal", "modal"); } }