[release/8.0] [Blazor] Fix for URLs/querystrings not updating for interactive components when using SSR routing (#51279)

# Invoke `LocationChanged` for interactive components when an enhanced navigation occurs

This PR makes the `LocationChanged` event get invoked for interactive runtimes when an enhanced navigation occurs.

## Description

This PR makes the following changes:
* The `LocationChanged` event gets invoked for all interactive runtimes when either a client-side or enhanced navigation occurs
  * Previously:
    * An enhanced navigation would have not invoked the `LocationChanged` event in interactive runtimes
    * A client-side navigation would only invoke the `LocationChanged` event for the runtime that started most recently
* Attempting to enable interactive routing from multiple interactive runtimes results in an error at runtime
* If an interactive router is present but multiple runtimes are available, the `LocationChanging` event only gets invoked for the runtime that has the interactive router
  * It would take additional work to allow either runtime to cancel a client-side navigation, and that's outside the scope of this PR. We have #48766 to track doing the extra work to support this scenario

Fixes #51216

## Customer Impact

Without this changes the customers will encounter problems with UI being correctly updated during enhanced navigation because `LocationChanging` event not firing. 

Besides the UI not updating correctly this will also cause customer registered handlers for the `LocationChanged` event not firing resulting in unexpected behaviors.

## Regression?

- [ ] Yes
- [x] No

[If yes, specify the version the behavior has regressed from]

## Risk

- [ ] High
- [ ] Medium
- [x] Low

Despite the size of this change, we have quite extensive automated tests (including these newly added ones) around the interactive routing scenarios, so we expect that nothing will break from this change.

## Verification

- [x] Manual (required)
- [x] Automated

## Packaging changes reviewed?

- [ ] Yes
- [x] No
- [ ] N/A

----

## When servicing release/2.1

- [ ] Make necessary changes in eng/PatchConfig.props

---------

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

Author: MackinnonBuck

src/Components/Server/src/Circuits/RemoteNavigationInterception.cs

@@ -35,6 +35,6 @@ public async Task EnableNavigationInterceptionAsync()
                 "attempted during prerendering or while the client is disconnected.");
         }
 
-        await _jsRuntime.InvokeAsync<object>(Interop.EnableNavigationInterception);
+        await _jsRuntime.InvokeAsync<object>(Interop.EnableNavigationInterception, WebRendererId.Server);
     }
 }

src/Components/Server/src/Circuits/RemoteNavigationManager.cs

@@ -157,7 +157,7 @@ private async Task SetHasLocationChangingListenersAsync(bool value)
     {
         try
         {
-            await _jsRuntime.InvokeVoidAsync(Interop.SetHasLocationChangingListeners, value);
+            await _jsRuntime.InvokeVoidAsync(Interop.SetHasLocationChangingListeners, WebRendererId.Server, value);
         }
         catch (JSDisconnectedException)
         {

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

@@ -10,6 +10,7 @@ import { DefaultReconnectionHandler } from './Platform/Circuits/DefaultReconnect
 import { discoverServerPersistedState, ServerComponentDescriptor } from './Services/ComponentDescriptorDiscovery';
 import { fetchAndInvokeInitializers } from './JSInitializers/JSInitializers.Server';
 import { RootComponentManager } from './Services/RootComponentManager';
+import { WebRendererId } from './Rendering/WebRendererId';
 
 let initializersPromise: Promise<void> | undefined;
 let appState: string;
@@ -74,7 +75,7 @@ async function startServerCore(components: RootComponentManager<ServerComponentD
   options.reconnectionHandler = options.reconnectionHandler || Blazor.defaultReconnectionHandler;
 
   // Configure navigation via SignalR
-  Blazor._internal.navigationManager.listenForNavigationEvents((uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
+  Blazor._internal.navigationManager.listenForNavigationEvents(WebRendererId.Server, (uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
     return circuit.sendLocationChanged(uri, state, intercepted);
   }, (callId: number, uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
     return circuit.sendLocationChanging(callId, uri, state, intercepted);

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

@@ -16,6 +16,7 @@ import { receiveDotNetDataStream } from './StreamingInterop';
 import { WebAssemblyComponentAttacher } from './Platform/WebAssemblyComponentAttacher';
 import { MonoConfig } from 'dotnet';
 import { RootComponentManager } from './Services/RootComponentManager';
+import { WebRendererId } from './Rendering/WebRendererId';
 
 let options: Partial<WebAssemblyStartOptions> | undefined;
 let initializersPromise: Promise<void>;
@@ -127,7 +128,7 @@ async function startCore(components: RootComponentManager<WebAssemblyComponentDe
     }
   };
 
-  Blazor._internal.navigationManager.listenForNavigationEvents(async (uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
+  Blazor._internal.navigationManager.listenForNavigationEvents(WebRendererId.WebAssembly, async (uri: string, state: string | undefined, intercepted: boolean): Promise<void> => {
     await dispatcher.invokeDotNetStaticMethodAsync(
       'Microsoft.AspNetCore.Components.WebAssembly',
       'NotifyLocationChanged',

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

@@ -9,6 +9,7 @@ import { startIpcReceiver } from './Platform/WebView/WebViewIpcReceiver';
 import { sendAttachPage, sendBeginInvokeDotNetFromJS, sendEndInvokeJSFromDotNet, sendByteArray, sendLocationChanged, sendLocationChanging } from './Platform/WebView/WebViewIpcSender';
 import { fetchAndInvokeInitializers } from './JSInitializers/JSInitializers.WebView';
 import { receiveDotNetDataStream } from './StreamingInterop';
+import { WebRendererId } from './Rendering/WebRendererId';
 
 let started = false;
 
@@ -32,8 +33,8 @@ async function boot(): Promise<void> {
 
   Blazor._internal.receiveWebViewDotNetDataStream = receiveWebViewDotNetDataStream;
 
-  navigationManagerFunctions.enableNavigationInterception();
-  navigationManagerFunctions.listenForNavigationEvents(sendLocationChanged, sendLocationChanging);
+  navigationManagerFunctions.enableNavigationInterception(WebRendererId.WebView);
+  navigationManagerFunctions.listenForNavigationEvents(WebRendererId.WebView, sendLocationChanged, sendLocationChanging);
 
   sendAttachPage(navigationManagerFunctions.getBaseURI(), navigationManagerFunctions.getLocationHref());
   await jsInitializer.invokeAfterStartedCallbacks(Blazor);

src/Components/Web.JS/src/Boot.Server.Common.ts

@@ -43,7 +43,9 @@ export function startIpcReceiver(): void {
 
     'Refresh': navigationManagerFunctions.refresh,
 
-    'SetHasLocationChangingListeners': navigationManagerFunctions.setHasLocationChangingListeners,
+    'SetHasLocationChangingListeners': (hasListeners: boolean) => {
+      navigationManagerFunctions.setHasLocationChangingListeners(WebRendererId.WebView, hasListeners);
+    },
 
     'EndLocationChanging': navigationManagerFunctions.endLocationChanging,
   };

src/Components/Web.JS/src/Boot.WebAssembly.Common.ts

@@ -60,7 +60,7 @@ class BlazorStreamingUpdate extends HTMLElement {
                   // The URL was already updated on the original link click. Replace so that 'back' goes to the pre-redirection location.
                   history.replaceState(null, '', destinationUrl);
                 }
-                performEnhancedPageLoad(destinationUrl);
+                performEnhancedPageLoad(destinationUrl, /* interceptedLink */ false);
               } else {
                 // Same reason for varying as above
                 if (isFormPost) {

src/Components/Web.JS/src/Boot.WebView.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 } from './NavigationUtils';
+import { attachProgrammaticEnhancedNavigationHandler, handleClickForNavigationInterception, hasInteractiveRouter, notifyEnhancedNavigationListners } from './NavigationUtils';
 
 /*
 In effect, we have two separate client-side navigation mechanisms:
@@ -74,7 +74,7 @@ function performProgrammaticEnhancedNavigation(absoluteInternalHref: string, rep
     history.pushState(null, /* ignored title */ '', absoluteInternalHref);
   }
 
-  performEnhancedPageLoad(absoluteInternalHref);
+  performEnhancedPageLoad(absoluteInternalHref, /* interceptedLink */ false);
 }
 
 function onDocumentClick(event: MouseEvent) {
@@ -88,7 +88,7 @@ function onDocumentClick(event: MouseEvent) {
 
   handleClickForNavigationInterception(event, absoluteInternalHref => {
     history.pushState(null, /* ignored title */ '', absoluteInternalHref);
-    performEnhancedPageLoad(absoluteInternalHref);
+    performEnhancedPageLoad(absoluteInternalHref, /* interceptedLink */ true);
   });
 }
 
@@ -97,7 +97,7 @@ function onPopState(state: PopStateEvent) {
     return;
   }
 
-  performEnhancedPageLoad(location.href);
+  performEnhancedPageLoad(location.href, /* interceptedLink */ false);
 }
 
 function onDocumentSubmit(event: SubmitEvent) {
@@ -139,16 +139,19 @@ function onDocumentSubmit(event: SubmitEvent) {
       fetchOptions.body = formData;
     }
 
-    performEnhancedPageLoad(url.toString(), fetchOptions);
+    performEnhancedPageLoad(url.toString(), /* interceptedLink */ false, fetchOptions);
   }
 }
 
-export async function performEnhancedPageLoad(internalDestinationHref: string, fetchOptions?: RequestInit) {
+export async function performEnhancedPageLoad(internalDestinationHref: string, interceptedLink: boolean, fetchOptions?: RequestInit) {
   performingEnhancedPageLoad = true;
 
   // First, stop any preceding enhanced page load
   currentEnhancedNavigationAbortController?.abort();
 
+  // Notify any interactive runtimes that an enhanced navigation is starting
+  notifyEnhancedNavigationListners(internalDestinationHref, interceptedLink);
+
   // Now request the new page via fetch, and a special header that tells the server we want it to inject
   // framing boundaries to distinguish the initial document and each subsequent streaming SSR update.
   currentEnhancedNavigationAbortController = new AbortController();

src/Components/Web.JS/src/Platform/WebView/WebViewIpcReceiver.ts

@@ -4,16 +4,22 @@
 import '@microsoft/dotnet-js-interop';
 import { resetScrollAfterNextBatch } from '../Rendering/Renderer';
 import { EventDelegator } from '../Rendering/Events/EventDelegator';
-import { handleClickForNavigationInterception, hasInteractiveRouter, hasProgrammaticEnhancedNavigationHandler, isWithinBaseUriSpace, performProgrammaticEnhancedNavigation, setHasInteractiveRouter, toAbsoluteUri } from './NavigationUtils';
+import { attachEnhancedNavigationListener, getInteractiveRouterRendererId, handleClickForNavigationInterception, hasInteractiveRouter, hasProgrammaticEnhancedNavigationHandler, isWithinBaseUriSpace, performProgrammaticEnhancedNavigation, setHasInteractiveRouter, toAbsoluteUri } from './NavigationUtils';
+import { WebRendererId } from '../Rendering/WebRendererId';
+import { isRendererAttached } from '../Rendering/WebRendererInteropMethods';
 
 let hasRegisteredNavigationEventListeners = false;
-let hasLocationChangingEventListeners = false;
 let currentHistoryIndex = 0;
 let currentLocationChangingCallId = 0;
 
-// Will be initialized once someone registers
-let notifyLocationChangedCallback: ((uri: string, state: string | undefined, intercepted: boolean) => Promise<void>) | null = null;
-let notifyLocationChangingCallback: ((callId: number, uri: string, state: string | undefined, intercepted: boolean) => Promise<void>) | null = null;
+type NavigationCallbacks = {
+  rendererId: WebRendererId;
+  hasLocationChangingEventListeners: boolean;
+  locationChanged(uri: string, state: string | undefined, intercepted: boolean): Promise<void>;
+  locationChanging(callId: number, uri: string, state: string | undefined, intercepted: boolean): Promise<void>;
+};
+
+const navigationCallbacks = new Map<WebRendererId, NavigationCallbacks>();
 
 let popStateCallback: ((state: PopStateEvent) => Promise<void> | void) = onBrowserInitiatedPopState;
 let resolveCurrentNavigation: ((shouldContinueNavigation: boolean) => void) | null = null;
@@ -32,11 +38,16 @@ export const internalFunctions = {
 };
 
 function listenForNavigationEvents(
+  rendererId: WebRendererId,
   locationChangedCallback: (uri: string, state: string | undefined, intercepted: boolean) => Promise<void>,
   locationChangingCallback: (callId: number, uri: string, state: string | undefined, intercepted: boolean) => Promise<void>
 ): void {
-  notifyLocationChangedCallback = locationChangedCallback;
-  notifyLocationChangingCallback = locationChangingCallback;
+  navigationCallbacks.set(rendererId, {
+    rendererId,
+    hasLocationChangingEventListeners: false,
+    locationChanged: locationChangedCallback,
+    locationChanging: locationChangingCallback,
+  });
 
   if (hasRegisteredNavigationEventListeners) {
     return;
@@ -45,10 +56,18 @@ function listenForNavigationEvents(
   hasRegisteredNavigationEventListeners = true;
   window.addEventListener('popstate', onPopState);
   currentHistoryIndex = history.state?._index ?? 0;
+
+  attachEnhancedNavigationListener((internalDestinationHref, interceptedLink) => {
+    notifyLocationChanged(interceptedLink, internalDestinationHref);
+  });
 }
 
-function setHasLocationChangingListeners(hasListeners: boolean) {
-  hasLocationChangingEventListeners = hasListeners;
+function setHasLocationChangingListeners(rendererId: WebRendererId, hasListeners: boolean) {
+  const callbacks = navigationCallbacks.get(rendererId);
+  if (!callbacks) {
+    throw new Error(`Renderer with ID '${rendererId}' is not listening for navigation events`);
+  }
+  callbacks.hasLocationChangingEventListeners = hasListeners;
 }
 
 export function scrollToElement(identifier: string): boolean {
@@ -162,8 +181,9 @@ async function performInternalNavigation(absoluteInternalHref: string, intercept
     return;
   }
 
-  if (!skipLocationChangingCallback && hasLocationChangingEventListeners) {
-    const shouldContinueNavigation = await notifyLocationChanging(absoluteInternalHref, state, interceptedLink);
+  const callbacks = getInteractiveRouterNavigationCallbacks();
+  if (!skipLocationChangingCallback && callbacks?.hasLocationChangingEventListeners) {
+    const shouldContinueNavigation = await notifyLocationChanging(absoluteInternalHref, state, interceptedLink, callbacks);
     if (!shouldContinueNavigation) {
       return;
     }
@@ -216,18 +236,12 @@ function ignorePendingNavigation() {
   }
 }
 
-function notifyLocationChanging(uri: string, state: string | undefined, intercepted: boolean): Promise<boolean> {
+function notifyLocationChanging(uri: string, state: string | undefined, intercepted: boolean, callbacks: NavigationCallbacks): Promise<boolean> {
   return new Promise<boolean>(resolve => {
     ignorePendingNavigation();
-
-    if (!notifyLocationChangingCallback) {
-      resolve(false);
-      return;
-    }
-
     currentLocationChangingCallId++;
     resolveCurrentNavigation = resolve;
-    notifyLocationChangingCallback(currentLocationChangingCallId, uri, state, intercepted);
+    callbacks.locationChanging(currentLocationChangingCallId, uri, state, intercepted);
   });
 }
 
@@ -241,7 +255,8 @@ function endLocationChanging(callId: number, shouldContinueNavigation: boolean)
 async function onBrowserInitiatedPopState(state: PopStateEvent) {
   ignorePendingNavigation();
 
-  if (hasLocationChangingEventListeners) {
+  const callbacks = getInteractiveRouterNavigationCallbacks();
+  if (callbacks?.hasLocationChangingEventListeners) {
     const index = state.state?._index ?? 0;
     const userState = state.state?.userState;
     const delta = index - currentHistoryIndex;
@@ -250,7 +265,7 @@ async function onBrowserInitiatedPopState(state: PopStateEvent) {
     // Temporarily revert the navigation until we confirm if the navigation should continue.
     await navigateHistoryWithoutPopStateCallback(-delta);
 
-    const shouldContinueNavigation = await notifyLocationChanging(uri, userState, false);
+    const shouldContinueNavigation = await notifyLocationChanging(uri, userState, false, callbacks);
     if (!shouldContinueNavigation) {
       return;
     }
@@ -261,10 +276,14 @@ async function onBrowserInitiatedPopState(state: PopStateEvent) {
   await notifyLocationChanged(false);
 }
 
-async function notifyLocationChanged(interceptedLink: boolean) {
-  if (notifyLocationChangedCallback) {
-    await notifyLocationChangedCallback(location.href, history.state?.userState, interceptedLink);
-  }
+async function notifyLocationChanged(interceptedLink: boolean, internalDestinationHref?: string) {
+  const uri = internalDestinationHref ?? location.href;
+
+  await Promise.all(Array.from(navigationCallbacks, async ([rendererId, callbacks]) => {
+    if (isRendererAttached(rendererId)) {
+      await callbacks.locationChanged(uri, history.state?.userState, interceptedLink);
+    }
+  }));
 }
 
 async function onPopState(state: PopStateEvent) {
@@ -275,6 +294,15 @@ async function onPopState(state: PopStateEvent) {
   currentHistoryIndex = history.state?._index ?? 0;
 }
 
+function getInteractiveRouterNavigationCallbacks(): NavigationCallbacks | undefined {
+  const interactiveRouterRendererId = getInteractiveRouterRendererId();
+  if (interactiveRouterRendererId === undefined) {
+    return undefined;
+  }
+
+  return navigationCallbacks.get(interactiveRouterRendererId);
+}
+
 function shouldUseClientSideRouting() {
   return hasInteractiveRouter() || !hasProgrammaticEnhancedNavigationHandler();
 }

src/Components/Web.JS/src/Rendering/StreamingRendering.ts

@@ -1,8 +1,11 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-let hasInteractiveRouterValue = false;
+import { WebRendererId } from '../Rendering/WebRendererId';
+
+let interactiveRouterRendererId: WebRendererId | undefined = undefined;
 let programmaticEnhancedNavigationHandler: typeof performProgrammaticEnhancedNavigation | undefined;
+let enhancedNavigationListener: typeof notifyEnhancedNavigationListners | undefined;
 
 /**
  * Checks if a click event corresponds to an <a> tag referencing a URL within the base href, and that interception
@@ -44,6 +47,14 @@ export function isWithinBaseUriSpace(href: string) {
   && (nextChar === '' || nextChar === '/' || nextChar === '?' || nextChar === '#');
 }
 
+export function attachEnhancedNavigationListener(listener: typeof enhancedNavigationListener) {
+  enhancedNavigationListener = listener;
+}
+
+export function notifyEnhancedNavigationListners(internalDestinationHref: string, interceptedLink: boolean) {
+  enhancedNavigationListener?.(internalDestinationHref, interceptedLink);
+}
+
 export function hasProgrammaticEnhancedNavigationHandler(): boolean {
   return programmaticEnhancedNavigationHandler !== undefined;
 }
@@ -107,16 +118,24 @@ function findAnchorTarget(event: MouseEvent): HTMLAnchorElement | null {
 
 function findClosestAnchorAncestorLegacy(element: Element | null, tagName: string) {
   return !element
-  ? null
-  : element.tagName === tagName
-  ? element
-  : findClosestAnchorAncestorLegacy(element.parentElement, tagName);
+    ? null
+    : element.tagName === tagName
+      ? element
+      : findClosestAnchorAncestorLegacy(element.parentElement, tagName);
 }
 
 export function hasInteractiveRouter(): boolean {
-  return hasInteractiveRouterValue;
+  return interactiveRouterRendererId !== undefined;
 }
 
-export function setHasInteractiveRouter() {
-  hasInteractiveRouterValue = true;
+export function getInteractiveRouterRendererId() : WebRendererId | undefined {
+  return interactiveRouterRendererId;
+}
+
+export function setHasInteractiveRouter(rendererId: WebRendererId) {
+  if (interactiveRouterRendererId !== undefined && interactiveRouterRendererId !== rendererId) {
+    throw new Error('Only one interactive runtime may enable navigation interception at a time.');
+  }
+
+  interactiveRouterRendererId = rendererId;
 }

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

@@ -9,15 +9,15 @@ internal interface IInternalJSImportMethods
 
     string GetApplicationEnvironment();
 
-    void NavigationManager_EnableNavigationInterception();
+    void NavigationManager_EnableNavigationInterception(int rendererId);
 
     void NavigationManager_ScrollToElement(string id);
 
     string NavigationManager_GetLocationHref();
 
     string NavigationManager_GetBaseUri();
 
-    void NavigationManager_SetHasLocationChangingListeners(bool value);
+    void NavigationManager_SetHasLocationChangingListeners(int rendererId, bool value);
 
     int RegisteredComponents_GetRegisteredComponentsCount();