Support <FocusOnNavigate> in SSR, new events

Author: MackinnonBuck

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

@@ -25,6 +25,7 @@ import { ConsoleLogger } from './Platform/Logging/Loggers';
 import { LogLevel } from './Platform/Logging/Logger';
 import { resolveOptions } from './Platform/Circuits/CircuitStartOptions';
 import { JSInitializer } from './JSInitializers/JSInitializers';
+import { enableFocusOnNavigate } from './Rendering/FocusOnNavigate';
 
 let started = false;
 let rootComponentManager: WebRootComponentManager;
@@ -50,12 +51,16 @@ function boot(options?: Partial<WebStartOptions>) : Promise<void> {
   const jsEventRegistry = JSEventRegistry.create(Blazor);
 
   const navigationEnhancementCallbacks: NavigationEnhancementCallbacks = {
+    enhancedNavigationStarted: (method) => {
+      jsEventRegistry.dispatchEvent('enhancednavigationstart', { method });
+    },
     documentUpdated: () => {
       rootComponentManager.onDocumentUpdated();
       jsEventRegistry.dispatchEvent('enhancedload', {});
     },
     enhancedNavigationCompleted() {
       rootComponentManager.onEnhancedNavigationCompleted();
+      jsEventRegistry.dispatchEvent('enhancednavigationend', {});
     },
   };
 
@@ -66,6 +71,8 @@ function boot(options?: Partial<WebStartOptions>) : Promise<void> {
     attachProgressivelyEnhancedNavigationListener(navigationEnhancementCallbacks);
   }
 
+  enableFocusOnNavigate(jsEventRegistry);
+
   // Wait until the initial page response completes before activating interactive components.
   // If stream rendering is used, this helps to ensure that only the final set of interactive
   // components produced by the stream render actually get activated for interactivity.
@@ -79,7 +86,6 @@ function boot(options?: Partial<WebStartOptions>) : Promise<void> {
 }
 
 function onInitialDomContentLoaded(options: Partial<WebStartOptions>) {
-
   // Retrieve and start invoking the initializers.
   // Blazor server options get defaults that are configured before we invoke the initializers
   // so we do the same here.

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

@@ -5,7 +5,7 @@ import '@microsoft/dotnet-js-interop';
 
 export const domFunctions = {
   focus,
-  focusBySelector
+  focusBySelector,
 };
 
 function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
@@ -22,7 +22,7 @@ function focus(element: HTMLOrSVGElement, preventScroll: boolean): void {
   }
 }
 
-function focusBySelector(selector: string, preventScroll: boolean): void {
+function focusBySelector(selector: string): Element | null {
   const element = document.querySelector(selector) as HTMLElement;
   if (element) {
     // If no explicit tabindex is defined, mark it as programmatically-focusable.
@@ -33,5 +33,8 @@ function focusBySelector(selector: string, preventScroll: boolean): void {
     }
 
     element.focus({ preventScroll: true });
+    return element;
   }
-}
+
+  return null;
+}

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

@@ -0,0 +1,127 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+import { domFunctions } from '../DomWrapper';
+import { EnhancedNavigationStartEvent, JSEventRegistry } from '../Services/JSEventRegistry';
+
+const customElementName = 'blazor-focus-on-navigate';
+const focusOnNavigateRegistrations: FocusOnNavigateRegistration[] = [];
+
+export function enableFocusOnNavigate(jsEventRegistry: JSEventRegistry) {
+  customElements.define(customElementName, FocusOnNavigate);
+  jsEventRegistry.addEventListener('enhancednavigationstart', onEnhancedNavigationStart);
+  jsEventRegistry.addEventListener('enhancednavigationend', onEnhancedNavigationEnd);
+  jsEventRegistry.addEventListener('enhancedload', onEnhancedLoad);
+  document.addEventListener('focusin', onFocusIn);
+  document.addEventListener('focusout', onFocusOut);
+
+  // Focus the element on the initial page load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', tryApplyFocus);
+  } else {
+    tryApplyFocus();
+  }
+}
+
+let shouldFocusOnEnhancedLoad = false;
+let isNavigating = false;
+
+function onEnhancedNavigationStart(ev: EnhancedNavigationStartEvent) {
+  // Only focus on enhanced load if the enhanced navigation is not a form post.
+  shouldFocusOnEnhancedLoad = ev.method !== 'post';
+  isNavigating = true;
+}
+
+function onEnhancedNavigationEnd() {
+  isNavigating = false;
+}
+
+function onEnhancedLoad() {
+  if (shouldFocusOnEnhancedLoad) {
+    tryApplyFocus();
+  }
+}
+
+function onFocusIn() {
+  // As soon as an element get successfully focused, don't attempt to focus again on future
+  // enhanced page updates.
+  shouldFocusOnEnhancedLoad = false;
+}
+
+function onFocusOut(ev: FocusEvent) {
+  // It's possible that the element lost focus because it was removed from the page,
+  // and now the document doesn't have an active element.
+  // There are two variations of this case that we care about:
+  // [1] This happens during enhanced navigation. In this case, we'll attempt to re-apply focus to
+  //     the element specified by the active <blazor-focus-on-navigate>, because we're still navigating.
+  // [2] This happens after an enhanced navigation. One common cause of this is when the focused element
+  //     gets replaced in the transition to interactivity. In this case, we'll only attempt to re-apply
+  //     focus if the removed element is the same one we manually applied focus to.
+  const target = ev.target;
+  if (target instanceof Element && (isNavigating || target === lastFocusedElement)) {
+    // We want to apply focus after all synchronous changes to the DOM have completed,
+    // including the potential removal of this element.
+    setTimeout(() => {
+      const documentHasNoFocusedElement = document.activeElement === null || document.activeElement === document.body;
+      if (documentHasNoFocusedElement && !document.contains(target)) {
+        tryApplyFocus();
+      }
+    }, 0);
+  }
+}
+
+let lastFocusedElement: Element | null = null;
+
+function tryApplyFocus() {
+  lastFocusedElement = null;
+
+  const selector = findActiveSelector();
+  if (selector) {
+    lastFocusedElement = domFunctions.focusBySelector(selector);
+  }
+}
+
+function findActiveSelector(): string | null {
+  // It's unlikely that there will be more than one <blazor-focus-on-navigate> registered
+  // at a time. But if there is, we'll prefer the one most recently added to the DOM,
+  // keeping a stack of all previous registrations to fall back on if the current one
+  // gets removed.
+  let registration: FocusOnNavigateRegistration | undefined;
+  while ((registration = focusOnNavigateRegistrations.at(-1)) !== undefined) {
+    if (registration.isConnected) {
+      return registration.selector;
+    }
+
+    focusOnNavigateRegistrations.pop();
+  }
+
+  return null;
+}
+
+type FocusOnNavigateRegistration = {
+  isConnected: boolean;
+  selector: string | null;
+}
+
+class FocusOnNavigate extends HTMLElement {
+  static observedAttributes = ['selector'];
+
+  private readonly _registration: FocusOnNavigateRegistration = {
+    isConnected: true,
+    selector: null,
+  };
+
+  connectedCallback() {
+    focusOnNavigateRegistrations.push(this._registration);
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (name === 'selector') {
+      this._registration.selector = newValue;
+    }
+  }
+
+  disconnectedCallback() {
+    this._registration.isConnected = false;
+  }
+}

src/Components/Web.JS/src/DomWrapper.ts

@@ -9,9 +9,15 @@ interface BlazorEvent {
   type: keyof BlazorEventMap;
 }
 
+export interface EnhancedNavigationStartEvent extends BlazorEvent {
+  method: string;
+}
+
 // Maps Blazor event names to the argument type passed to registered listeners.
 export interface BlazorEventMap {
-  'enhancedload': BlazorEvent;
+  'enhancedload': BlazorEvent,
+  'enhancednavigationstart': EnhancedNavigationStartEvent,
+  'enhancednavigationend': BlazorEvent,
 }
 
 export class JSEventRegistry {
@@ -44,7 +50,7 @@ export class JSEventRegistry {
       return;
     }
 
-    const event: BlazorEventMap[K] = {
+    const event = {
       ...ev,
       type,
     };

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

@@ -42,6 +42,7 @@ let performingEnhancedPageLoad: boolean;
 let currentContentUrl = location.href;
 
 export interface NavigationEnhancementCallbacks {
+  enhancedNavigationStarted: (method: string) => void;
   documentUpdated: () => void;
   enhancedNavigationCompleted: () => void;
 }
@@ -185,6 +186,10 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
   // Notify any interactive runtimes that an enhanced navigation is starting
   notifyEnhancedNavigationListners(internalDestinationHref, interceptedLink);
 
+  // Invoke other enhanced navigation handlers
+  const requestMethod = fetchOptions?.method ?? 'get';
+  navigationEnhancementCallbacks.enhancedNavigationStarted(requestMethod);
+
   // 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();
@@ -201,7 +206,7 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
   let isNonRedirectedPostToADifferentUrlMessage: string | null = null;
   await getResponsePartsWithFraming(responsePromise, abortSignal,
     (response, initialContent) => {
-      const isGetRequest = !fetchOptions?.method || fetchOptions.method === 'get';
+      const isGetRequest = requestMethod === 'get';
       const isSuccessResponse = response.status >= 200 && response.status < 300;
 
       // For true 301/302/etc redirections to external URLs, we'll receive an opaque response
@@ -267,7 +272,7 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
           // we can navigate back to (as we don't know if the location supports GET) and we are not able to replicate the Resubmit form?
           // browser behavior.
           // The only case where this is acceptable is when the last content URL, is the same as the URL for the form we posted to.
-          isNonRedirectedPostToADifferentUrlMessage = `Cannot perform enhanced form submission that changes the URL (except via a redirection), because then back/forward would not work. Either remove this form\'s \'action\' attribute, or change its method to \'get\', or do not mark it as enhanced.\nOld URL: ${location.href}\nNew URL: ${response.url}`;
+          isNonRedirectedPostToADifferentUrlMessage = `Cannot perform enhanced form submission that changes the URL (except via a redirection), because then back/forward would not work. Either remove this form's 'action' attribute, or change its method to 'get', or do not mark it as enhanced.\nOld URL: ${location.href}\nNew URL: ${response.url}`;
         } else {
           if (location.href !== currentContentUrl) {
             // The url on the browser might be out of data, so push an entry to the stack to update the url in place.
@@ -301,7 +306,7 @@ export async function performEnhancedPageLoad(internalDestinationHref: string, i
           retryEnhancedNavAsFullPageLoad(internalDestinationHref);
         } else {
           // For non-get requests, we can't safely re-request, so just treat it as an error
-          replaceDocumentWithPlainText(`Error: ${fetchOptions.method} request to ${internalDestinationHref} returned non-HTML content of type ${responseContentType || 'unspecified'}.`);
+          replaceDocumentWithPlainText(`Error: ${requestMethod} request to ${internalDestinationHref} returned non-HTML content of type ${responseContentType || 'unspecified'}.`);
         }
       }
     },

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

@@ -4,3 +4,4 @@ Microsoft.AspNetCore.Components.Web.Internal.IInternalWebJSInProcessRuntime.Invo
 Microsoft.AspNetCore.Components.Web.KeyboardEventArgs.IsComposing.get -> bool
 Microsoft.AspNetCore.Components.Web.KeyboardEventArgs.IsComposing.set -> void
 override Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.RendererInfo.get -> Microsoft.AspNetCore.Components.RendererInfo!
+override Microsoft.AspNetCore.Components.Routing.FocusOnNavigate.BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder! builder) -> void

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

@@ -1,6 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.JSInterop;
 
 namespace Microsoft.AspNetCore.Components.Routing;
@@ -12,6 +13,8 @@ namespace Microsoft.AspNetCore.Components.Routing;
 /// </summary>
 public class FocusOnNavigate : ComponentBase
 {
+    private const string CustomElementName = "blazor-focus-on-navigate";
+
     private Type? _lastNavigatedPageType = typeof(NonMatchingType);
     private bool _focusAfterRender;
 
@@ -50,6 +53,19 @@ protected override void OnParametersSet()
         }
     }
 
+    /// <inheritdoc/>
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        if (AssignedRenderMode is not null)
+        {
+            return;
+        }
+
+        builder.OpenElement(0, CustomElementName);
+        builder.AddAttribute(1, "selector", Selector);
+        builder.CloseElement();
+    }
+
     /// <inheritdoc />
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -11,7 +11,7 @@
     <Router AppAssembly="@typeof(App).Assembly">
         <Found Context="routeData">
             <RouteView RouteData="@routeData" />
-            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+            <FocusOnNavigate RouteData="@routeData" Selector="#test-element" />
         </Found>
         <NotFound>There's nothing here</NotFound>
     </Router>

src/Components/Web/src/Routing/FocusOnNavigate.cs

@@ -0,0 +1 @@
+<input type="text" id="test-element" placeholder="I want focus!" />

src/Components/test/testassets/Components.TestServer/RazorComponents/App.razor

@@ -0,0 +1,5 @@
+@page "/nav/focus-on-navigate"
+
+<h1>Focus on navigate</h1>
+
+<ComponentWithElementToFocus @rendermode="RenderMode.InteractiveServer" />

src/Components/test/testassets/Components.TestServer/RazorComponents/Components/ComponentWithElementToFocus.razor

@@ -23,6 +23,7 @@
     <NavLink href="nav/location-changed/server">LocationChanged/LocationChanging event (server)</NavLink>
     <NavLink href="nav/location-changed/wasm">LocationChanged/LocationChanging event (wasm)</NavLink>
     <NavLink href="nav/location-changed/server-and-wasm">LocationChanged/LocationChanging event (server-and-wasm)</NavLink>
+    <NavLink href="nav/focus-on-navigate">Focus on navigate</NavLink>
     <NavLink href="nav/null-parameter/server">Null component parameter (server)</NavLink>
     <NavLink href="nav/null-parameter/wasm">Null component parameter (wasm)</NavLink>
     <br />