FocusOnNavigate does not work (dotnet8 - BlazorWebApp)

[ZANZAAA]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The user's scrolling position will be maintained when navigating to a new page.
The <h1> element does not have the focus.

Even though

• <FocusOnNavigate RouteData="@routeData" Selector="h1" /> is correctly set
• The pages have a h1 HTML tag

Expected Behavior

After navigating from one page to another, sets focus to an element matching a CSS selector.
Source

Steps To Reproduce

1. Create a new project using the new Blazor Web App template.
2. Add some content to the sample pages (Home, Counter, Weather) so users need to scroll to get to the bottom of it.

<br />
<div style="height:2000px; background-color:bisque"></div>
<br />

3. Once at the bottom bottom of the page, use the menu on the left to navigate to a different page.
4. The user will remain at their current scrolling position. The focus is not set on the <h1> element.

Exceptions (if any)

No response

.NET Version

8

Anything else?

No response

[ZANZAAA]

Any ideas on how to fix that issue for SSR?

I created a component and added it App.razor
<ScrollOnNavigate @rendermode="InteractiveServerWithoutPrerendering" />

The component subscribed to NavigationManager.LocationChanged and executes some JS when OnAfterRenderAsync is called. It works but my problem is that it is interactive. Some pages don't need any interactions so I'm looking at an alternative to make it work without relying on the AfterRender method.

[ZANZAAA]

I added this piece of code to my main.js and it works.

window.Blazor.addEventListener("enhancedload", () => {
    window.scroll({ top: 0, left: 0, behavior: 'instant' });
});

Found the solution while reading https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/static-server-rendering?view=aspnetcore-8.0 (loading scripts for SSR pages)

[ghost]

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[sonnemaf]

This issue should not be fixed asap. I can't wait 11 months (.NET 9), it is a showstopper.

Have a look at this video. Just create 2 long pages and add them to the NavMenu. It is horrible. I hope there is a workaround.

Blazor8.Scroll.issue.mp4

[Andrey-2021]

I have this problem in 7 (version).
I have many long pages in my Blazor Server project.
We need to solve this problem as soon as possible.
You can't wait for version 9

[ZANZAAA]

@Andrey-2021 @sonnemaf Did you see my previous comment

I know it's a dirty/quick fix but at least you can use Blazor on prod with a nicer navigation experience.

[sonnemaf]

@ZANZAAA Yes your fix it works! Still hope to get the bug fix earlier than .NET 9

[Andrey-2021]

Now you can in <FocusOnNavigate RouteData="routeData" Selector="h1"> in Selector="h1"
Instead of 'h1' write 'h6'-an UNUSED selector in your code.
I do this. It's work.
But this is an "incorrect" decision,
until the developers fix the bug

[mkArtakMSFT]

This will be handled as part of #53142

[thirstyape]

I experienced this and resolved by using a CSS id tag. I initially resolved using a class, but an id seems like the right approach to ensure a single item is selected.

<FocusOnNavigate RouteData="@routeData" Selector="#main-content-section" />