According to the following links: Auto reconnect Blazor Serverside https://github.com/dotnet/aspnetcore/issues/10325#issuecomment-537979717
one way to auto reconnect to a Blazor server-side page is to refresh the page when it detects that a reconnection is needed. This is accomplished by adding a MutationObserver class in javascript to monitor when the Blazor component displays the message when it tries to reconnect. When this happens, Blazor puts the components-reconnect-modal as visible and then displays a message with a link to reload. So to monitor this, we have to check something like:
if (document.querySelector('#components-reconnect-modal h5 a')) {
It works perfectly when I don't customize the messages involved that Blazor uses when it tries to reconnect, when the connection failed or the connection was rejected. But when I customize the messages (via adding a div with class name = components-reconnect-modal, and modifying the CSS), the document.querySelector function does not find the message.
Obviously I replace the component to search for my customized id message, but it is not working. Does someone have an example of how to use querySelector with a customized components-reconnect-modal block?
For the customization I used the instructions specified in: https://www.syncfusion.com/faq/blazor/general/how-can-i-show-a-custom-message-when-a-customers-connection-is-lost-with-the-server
It works just fine and it shows the messages I wanted. But when I mix this with the code to detect when the message is being shown, querySelector doesn't seem to find it. I tried searching for #components-reconnect-modal, .components-reconnect-show, #components-reconnect-modal.show, .my-reconnect-modal, .my-reconnect-modal.show to no avail.
The weird part is that when debugging I manually call the document.querySelector with the correct class/component and it returns what is expected (an object, not null), but when running the site without debugging it does not work, so the refresh is not triggered.
