Fix Navigation for anchor inside <svg> element (#51706) (#53541)

* fix enhanced nav for svg element

* small fix

* simplify findClosestAnchorAncestorLegacy

* added test for svg element inside anchor

* removed _blazorDisableComposedPath  logic and findClosestAnchorAncestorLegacy function

* added test for anchor inside svg element dor client-side navigation

* added SVGAElement to findAnchorTarget and

Co-authored-by: Surayya Huseyn Zada <[email protected]>

Author: MackinnonBuck

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -84,7 +84,7 @@ function onDocumentClick(event: MouseEvent) {
     return;
   }
 
-  if (event.target instanceof HTMLElement && !enhancedNavigationIsEnabledForElement(event.target)) {
+  if (event.target instanceof Element && !enhancedNavigationIsEnabledForElement(event.target)) {
     return;
   }
 
@@ -421,7 +421,7 @@ function splitStream(frameBoundaryMarker: string) {
   });
 }
 
-function enhancedNavigationIsEnabledForElement(element: HTMLElement): boolean {
+function enhancedNavigationIsEnabledForElement(element: Element): boolean {
   // For links, they default to being enhanced, but you can override at any ancestor level (both positively and negatively)
   const closestOverride = element.closest('[data-enhance-nav]');
   if (closestOverride) {

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -86,42 +86,26 @@ function eventHasSpecialKey(event: MouseEvent) {
   return event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
 }
 
-function canProcessAnchor(anchorTarget: HTMLAnchorElement) {
+function canProcessAnchor(anchorTarget: HTMLAnchorElement | SVGAElement) {
   const targetAttributeValue = anchorTarget.getAttribute('target');
   const opensInSameFrame = !targetAttributeValue || targetAttributeValue === '_self';
   return opensInSameFrame && anchorTarget.hasAttribute('href') && !anchorTarget.hasAttribute('download');
 }
 
-function findAnchorTarget(event: MouseEvent): HTMLAnchorElement | null {
-  // _blazorDisableComposedPath is a temporary escape hatch in case any problems are discovered
-  // in this logic. It can be removed in a later release, and should not be considered supported API.
-  const path = !window['_blazorDisableComposedPath'] && event.composedPath && event.composedPath();
+function findAnchorTarget(event: MouseEvent): HTMLAnchorElement | SVGAElement | null {
+  const path = event.composedPath && event.composedPath();
   if (path) {
     // This logic works with events that target elements within a shadow root,
     // as long as the shadow mode is 'open'. For closed shadows, we can't possibly
     // know what internal element was clicked.
     for (let i = 0; i < path.length; i++) {
       const candidate = path[i];
-      if (candidate instanceof Element && candidate.tagName === 'A') {
-        return candidate as HTMLAnchorElement;
+      if (candidate instanceof HTMLAnchorElement || candidate instanceof SVGAElement) {
+        return candidate;
       }
-    }
-    return null;
-  } else {
-    // Since we're adding use of composedPath in a patch, retain compatibility with any
-    // legacy browsers that don't support it by falling back on the older logic, even
-    // though it won't work properly with ShadowDOM. This can be removed in the next
-    // major release.
-    return findClosestAnchorAncestorLegacy(event.target as Element | null, 'A');
-  }
-}
-
-function findClosestAnchorAncestorLegacy(element: Element | null, tagName: string) {
-  return !element
-    ? null
-    : element.tagName === tagName
-      ? element
-      : findClosestAnchorAncestorLegacy(element.parentElement, tagName);
+    } 
+  } 
+  return null;
 }
 
 export function hasInteractiveRouter(): boolean {

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -98,7 +98,6 @@ public void EnhancedNavCanBeDisabledHierarchically()
         // Check we got there, but we did *not* retain the <h1> element
         Browser.Equal("Other", () => Browser.Exists(By.TagName("h1")).Text);
         Assert.Throws<StaleElementReferenceException>(() => originalH1Elem.Text);
-
     }
 
     [Fact]
@@ -114,7 +113,51 @@ public void EnhancedNavCanBeReenabledHierarchically()
         // Check we got there, and it did retain the <h1> element
         Browser.Equal("Other", () => Browser.Exists(By.TagName("h1")).Text);
         Assert.Equal("Other", originalH1Elem.Text);
+    }
+
+    [Fact]
+    public void EnhancedNavWorksInsideSVGElement()
+    {
+        Navigate($"{ServerPathBase}/nav");
+
+        var originalH1Elem = Browser.Exists(By.TagName("h1"));
+        Browser.Equal("Hello", () => originalH1Elem.Text);
+
+        Browser.Exists(By.TagName("nav")).FindElement(By.Id("svg-nav-link")).Click();
+
+        // Check we got there, and it did retain the <h1> element
+        Browser.Equal("Other", () => Browser.Exists(By.TagName("h1")).Text);
+        Assert.Equal("Other", originalH1Elem.Text);
+    }
 
+    [Fact]
+    public void EnhancedNavCanBeDisabledInSVGElementContainingAnchor()
+    {
+        Navigate($"{ServerPathBase}/nav");
+
+        var originalH1Elem = Browser.Exists(By.TagName("h1"));
+        Browser.Equal("Hello", () => originalH1Elem.Text);
+
+        Browser.Exists(By.TagName("nav")).FindElement(By.Id("svg-not-enhanced-nav-link")).Click();
+
+        // Check we got there, but we did *not* retain the <h1> element
+        Browser.Equal("Other", () => Browser.Exists(By.TagName("h1")).Text);
+        Assert.Throws<StaleElementReferenceException>(() => originalH1Elem.Text);
+    }
+
+    [Fact]
+    public void EnhancedNavCanBeDisabledInSVGElementInsideAnchor()
+    {
+        Navigate($"{ServerPathBase}/nav");
+
+        var originalH1Elem = Browser.Exists(By.TagName("h1"));
+        Browser.Equal("Hello", () => originalH1Elem.Text);
+
+        Browser.Exists(By.TagName("nav")).FindElement(By.Id("svg-in-anchor-not-enhanced-nav-link")).Click();
+
+        // Check we got there, but we did *not* retain the <h1> element
+        Browser.Equal("Other", () => Browser.Exists(By.TagName("h1")).Text);
+        Assert.Throws<StaleElementReferenceException>(() => originalH1Elem.Text);
     }
 
     [Fact]

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

@@ -1784,4 +1784,19 @@ private void AssertHighlightedLinks(params string[] linkTexts)
             .FindElements(By.CssSelector("a.active"))
             .Select(x => x.Text));
     }
+
+    [Fact]
+    public void ClickOnAnchorInsideSVGElementGetsIntercepted()
+    {
+        SetUrlViaPushState("/");
+        var app = Browser.MountTestComponent<TestRouter>();
+        app.FindElement(By.LinkText("Anchor inside SVG Element")).Click();
+
+        Browser.Equal("0", () => Browser.Exists(By.Id("location-changed-count")).Text);
+
+        Browser.FindElement(By.Id("svg-link")).Click();
+
+        // If the click was intercepted then LocationChanged works
+        Browser.Equal("1", () => Browser.Exists(By.Id("location-changed-count")).Text);
+    }
 }

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

@@ -0,0 +1,28 @@
+@page "/SVGNavigation"
+@inject NavigationManager NavigationManager
+@using Microsoft.AspNetCore.Components.Routing
+
+<svg width="400px" height="30px" data-enhance-nav="true">
+    <a href="SVGNavigation" id="svg-link">
+        <text x="15" y="15" font-size="15">SVG data-enhance-nav</text>
+    </a>
+</svg>
+
+<br />
+
+<p>LocationChanged: <span id="location-changed-count">@_locationChangedCount</span></p>
+
+@code {
+    private int _locationChangedCount = 0;
+
+    protected override void OnInitialized()
+    {
+        NavigationManager.LocationChanged += OnLocationChanged;
+    }
+
+    private void OnLocationChanged(object sender, LocationChangedEventArgs args)
+    {
+        _locationChangedCount++;
+        StateHasChanged();
+    }
+}

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

@@ -38,6 +38,7 @@
     <li><NavLink>Null href never matches</NavLink></li>
     <li><custom-link-with-shadow-root target-url="Other"></custom-link-with-shadow-root></li>
     <li><NavLink href="/subdir/LongPageWithHash">Long page with hash</NavLink></li>
+    <li><NavLink href="/subdir/SVGNavigation">Anchor inside SVG Element</NavLink></li>
 </ul>
 
 <button id="do-navigation" @onclick=@(x => NavigationManager.NavigateTo("Other"))>

src/Components/test/E2ETest/Tests/RoutingTest.cs

@@ -25,6 +25,24 @@
     <NavLink href="nav/location-changed/server-and-wasm">LocationChanged/LocationChanging event (server-and-wasm)</NavLink>
     <NavLink href="nav/null-parameter/server">Null component parameter (server)</NavLink>
     <NavLink href="nav/null-parameter/wasm">Null component parameter (wasm)</NavLink>
+    <br />
+    <a href="nav/other" data-enhance-nav="false">
+        <svg width="100" height="100" id="svg-in-anchor-not-enhanced-nav-link">
+            <rect width="50" height="50" style="fill:rgb(0,0,255);" />
+        </svg>
+    </a>
+    <svg width="100px" height="30px" id="svg-nav-link">
+        <NavLink href="nav/other">
+            <text x="15" y="15" font-size="15">Other SVG</text>
+        </NavLink>
+    </svg>
+    <br />
+    <svg width="200px" height="30px" id="svg-not-enhanced-nav-link" data-enhance-nav="false">
+        <NavLink href="nav/other">
+            <text x="15" y="15" font-size="15">Other SVG (no enhanced nav)</text>
+        </NavLink>
+    </svg>
+    <br />
 </nav>
 <hr/>
 <main>