Feedback

Author: dariatiurina

src/Components/Web.JS/src/Services/NavigationEnhancement.ts

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { synchronizeDomContent } from '../Rendering/DomMerging/DomSync';
-import { attachProgrammaticEnhancedNavigationHandler, handleClickForNavigationInterception, hasInteractiveRouter, isForSamePath, isSamePageWithHash, notifyEnhancedNavigationListeners, performScrollToElementOnTheSamePage, isHashOnlyChange } from './NavigationUtils';
+import { attachProgrammaticEnhancedNavigationHandler, handleClickForNavigationInterception, hasInteractiveRouter, isForSamePath, notifyEnhancedNavigationListeners, performScrollToElementOnTheSamePage, isSameUrlWithDifferentHash } from './NavigationUtils';
 import { resetScrollAfterNextBatch, resetScrollIfNeeded } from '../Rendering/Renderer';
 
 /*
@@ -99,7 +99,7 @@ function onDocumentClick(event: MouseEvent) {
   handleClickForNavigationInterception(event, absoluteInternalHref => {
     const originalLocation = location.href;
 
-    const shouldScrollToHash = isSamePageWithHash(absoluteInternalHref);
+    const shouldScrollToHash = isSameUrlWithDifferentHash(originalLocation, absoluteInternalHref);
     history.pushState(null, /* ignored title */ '', absoluteInternalHref);
 
     if (shouldScrollToHash) {
@@ -120,7 +120,7 @@ function onPopState(state: PopStateEvent) {
     return;
   }
 
-  if (isHashOnlyChange(currentContentUrl, location.href)) {
+  if (isSameUrlWithDifferentHash(currentContentUrl, location.href)) {
     return;
   }
 

src/Components/Web.JS/src/Services/NavigationManager.ts

@@ -4,7 +4,7 @@
 import '@microsoft/dotnet-js-interop';
 import { resetScrollAfterNextBatch } from '../Rendering/Renderer';
 import { EventDelegator } from '../Rendering/Events/EventDelegator';
-import { attachEnhancedNavigationListener, getInteractiveRouterRendererId, handleClickForNavigationInterception, hasInteractiveRouter, hasProgrammaticEnhancedNavigationHandler, isForSamePath, isSamePageWithHash, isWithinBaseUriSpace, performProgrammaticEnhancedNavigation, performScrollToElementOnTheSamePage, scrollToElement, setHasInteractiveRouter, toAbsoluteUri } from './NavigationUtils';
+import { attachEnhancedNavigationListener, getInteractiveRouterRendererId, handleClickForNavigationInterception, hasInteractiveRouter, hasProgrammaticEnhancedNavigationHandler, isForSamePath, isSameUrlWithDifferentHash, isWithinBaseUriSpace, performProgrammaticEnhancedNavigation, performScrollToElementOnTheSamePage, scrollToElement, setHasInteractiveRouter, toAbsoluteUri } from './NavigationUtils';
 import { WebRendererId } from '../Rendering/WebRendererId';
 import { isRendererAttached } from '../Rendering/WebRendererInteropMethods';
 
@@ -150,7 +150,7 @@ function performExternalNavigation(uri: string, replace: boolean) {
 async function performInternalNavigation(absoluteInternalHref: string, interceptedLink: boolean, replace: boolean, state: string | undefined = undefined, skipLocationChangingCallback = false) {
   ignorePendingNavigation();
 
-  if (isSamePageWithHash(absoluteInternalHref)) {
+  if (isSameUrlWithDifferentHash(location.href, absoluteInternalHref)) {
     saveToBrowserHistory(absoluteInternalHref, replace, state);
     performScrollToElementOnTheSamePage(absoluteInternalHref);
     return;

src/Components/Web.JS/src/Services/NavigationUtils.ts

@@ -47,17 +47,12 @@ export function isWithinBaseUriSpace(href: string) {
   && (nextChar === '' || nextChar === '/' || nextChar === '?' || nextChar === '#');
 }
 
-export function isSamePageWithHash(absoluteHref: string): boolean {
-  const url = new URL(absoluteHref);
-  return url.hash !== '' && location.origin === url.origin && location.pathname === url.pathname && location.search === url.search;
-}
-
-export function isHashOnlyChange(oldUrl: string, newUrl: string): boolean {
+export function isSameUrlWithDifferentHash(oldUrl: string, newUrl: string): boolean {
   try {
     const a = new URL(oldUrl);
     const b = new URL(newUrl);
     return a.origin === b.origin && a.pathname === b.pathname
-      && a.search === b.search && a.hash !== b.hash;
+      && a.search === b.search && b.hash !== '';
   } catch {
     return false;
   }

src/Components/test/E2ETest/ServerRenderingTests/EnhancedNavigationTest.cs

@@ -197,31 +197,37 @@ public void CanScrollToHashWithoutPerformingFullNavigation()
     }
 
     [Fact]
-    public void NonEnhancedNavCanScrollToHashWithoutFetchingPage()
+    public void NonEnhancedNavCanScrollToHashWithoutFetchingPageAnchor()
     {
         Navigate($"{ServerPathBase}/nav/scroll-to-hash");
-        Browser.Equal("Scroll to hash", () => Browser.Exists(By.TagName("h1")).Text);
-
-        var javascript = (IJavaScriptExecutor)Browser;
-        javascript.ExecuteScript(@"
-            window.testFetchCalls = [];
-            const originalFetch = window.fetch;
-            window.fetch = function(...args) {
-                window.testFetchCalls.push(args[0]);
-                return originalFetch.apply(this, args);
-                };");
+        var originalTextElem = Browser.Exists(By.CssSelector("#anchor #text"));
+        Browser.Equal("Text", () => originalTextElem.Text);
 
-        Browser.Exists(By.Id("scroll-anchor-enhance-nav-false")).Click();
+        Browser.Exists(By.CssSelector("#anchor #scroll-anchor")).Click();
         Browser.True(() => Browser.GetScrollY() > 500);
         Browser.True(() => Browser
-            .Exists(By.Id("uri-on-page-load-enhance-nav-false"))
+            .Exists(By.CssSelector("#anchor #uri-on-page-load"))
             .GetDomAttribute("data-value")
             .EndsWith("scroll-to-hash", StringComparison.Ordinal));
 
-        var fetchCalls = javascript.ExecuteScript("return window.testFetchCalls;") as IEnumerable<object>;
-        var relevantCalls = fetchCalls?.Where(call => call.ToString().Contains("scroll-to-hash")) ?? Enumerable.Empty<object>();
+        Browser.Equal("Text", () => originalTextElem.Text);
+    }
+
+    [Fact]
+    public void NonEnhancedNavCanScrollToHashWithoutFetchingPageNavLink()
+    {
+        Navigate($"{ServerPathBase}/nav/scroll-to-hash");
+        var originalTextElem = Browser.Exists(By.CssSelector("#navlink #text"));
+        Browser.Equal("Text", () => originalTextElem.Text);
+
+        Browser.Exists(By.CssSelector("#navlink #scroll-anchor")).Click();
+        Browser.True(() => Browser.GetScrollY() > 500);
+        Browser.True(() => Browser
+            .Exists(By.CssSelector("#navlink #uri-on-page-load"))
+            .GetDomAttribute("data-value")
+            .EndsWith("scroll-to-hash", StringComparison.Ordinal));
 
-        Assert.Empty(relevantCalls);
+        Browser.Equal("Text", () => originalTextElem.Text);
     }
 
     [Theory]

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageForScrollingToHash.razor

@@ -1,6 +1,7 @@
 @page "/nav/scroll-to-hash"
 @attribute [StreamRendering]
 @inject NavigationManager NavigationManager
+@using Microsoft.AspNetCore.Components.Forms
 
 <PageTitle>Page for scrolling to hash</PageTitle>
 
@@ -13,10 +14,17 @@
     <div id="uri-on-page-load" style="display: none" data-value="@uriOnPageLoad"></div>
 </p>
 
-<p data-enhance-nav="false">
-    <a id="scroll-anchor-enhance-nav-false" href="nav/scroll-to-hash#some-content">Scroll via anchor</a>
-    <div id="uri-on-page-load-enhance-nav-false" style="display: none" data-value="@uriOnPageLoad"></div>
-</p>
+<div data-enhance-nav="false" id="anchor">
+    <a id="scroll-anchor" href="nav/scroll-to-hash#some-content">Scroll via anchor</a>
+    <div id="uri-on-page-load" style="display: none" data-value="@uriOnPageLoad"></div>
+    <p id="text">Text</p>
+</div>
+
+<div data-enhance-nav="false" id="navlink">
+    <NavLink id="scroll-anchor" href="nav/scroll-to-hash#some-content">Scroll via NavLink</NavLink>
+    <div id="uri-on-page-load" style="display: none" data-value="@uriOnPageLoad"></div>
+    <p id="text">Text</p>
+</div>
 
 <div style="height: 2000px; border: 2px dashed red;">spacer</div>