[Blazor]: Why enhance naviagation would clear the <head> element?

ElderJames commented 8 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

We found that when the page jumped, the head element was modified, causing the style and JS to reload.

https://github.com/ant-design-blazor/ant-design-blazor/issues/3747

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

No response

Anything else?

No response

ElderJames commented 7 months ago

Here is the repro repo https://github.com/ElderJames/NavigateIssue

You can submit the form in Home page then can see the style was loss in a moment. I used js initializers to insert the style. https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/wwwroot/AntDesign.lib.module.js

MackinnonBuck commented 7 months ago

Thanks for reaching out. This happens because enhanced navigation removes any content from the page that does not match what the server rendered. The exception to this is the children of any elements with the data-permanent attribute.

Putting the data-permanent attribute on the <head> may not be desirable, though, because then all head content gets preserved and ignores whatever the server renders.

To work around this (although it's a bit weird), you could have two <head> elements, one with the dynamically-added styles and a data-preserve attribute, and another with the rest of the head content. According to this, this approach should work with modern browsers even though it's not technically valid HTML.

A less weird solution might be to register a listener for Blazor's enhancedload event, and re-add the styles in that event if they've been removed. Something like:

Blazor.addEventListener('enhancedload', () => { ... });

We also have an issue tracking updating data-permanent to also apply to the element with the attribute (not just its children), which would make this scenario not require any of these hacks.

Could you please let us know if any of these approaches work for you? Thanks!

dotnet-policy-service[bot] commented 7 months ago

Hi @ElderJames. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

ElderJames commented 7 months ago

I tried to add the head dynamically with a data-permanent attribute, but the head element was still removed after the form was submitted.

dotnet-policy-service[bot] commented 7 months ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.

dotnet / aspnetcore