Simplify handling of multiple selectors

Author: MackinnonBuck

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

@@ -5,19 +5,20 @@ import { domFunctions } from '../DomWrapper';
 import { EnhancedNavigationStartEvent, JSEventRegistry } from '../Services/JSEventRegistry';
 
 const customElementName = 'blazor-focus-on-navigate';
-const focusOnNavigateRegistrations: FocusOnNavigateRegistration[] = [];
-
+let currentFocusOnNavigateElement: FocusOnNavigateElement | null = null;
 let allowFocusOnEnhancedLoad = false;
 
 export function enableFocusOnNavigate(jsEventRegistry: JSEventRegistry) {
-  customElements.define(customElementName, FocusOnNavigate);
+  customElements.define(customElementName, FocusOnNavigateElement);
   jsEventRegistry.addEventListener('enhancednavigationstart', onEnhancedNavigationStart);
   jsEventRegistry.addEventListener('enhancedload', onEnhancedLoad);
   document.addEventListener('focusin', onFocusIn);
   document.addEventListener('focusout', onFocusOut);
 
-  // Focus the element on the initial page load
+  // Focus the element on the initial page load.
   if (document.readyState === 'loading') {
+    // There may be streaming updates on the initial page load, so we want to allow
+    // those to add elements matching the active selector.
     allowFocusOnEnhancedLoad = true;
     document.addEventListener('DOMContentLoaded', afterInitialPageLoad);
   } else {
@@ -78,53 +79,21 @@ function tryApplyFocus(forceMoveFocus: boolean) {
 
   lastFocusedElement = null;
 
-  const selector = findActiveSelector();
+  const selector = currentFocusOnNavigateElement?.getAttribute('selector');
   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,
-  };
-
+class FocusOnNavigateElement extends HTMLElement {
   connectedCallback() {
-    focusOnNavigateRegistrations.push(this._registration);
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === 'selector') {
-      this._registration.selector = newValue;
-    }
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    currentFocusOnNavigateElement = this;
   }
 
   disconnectedCallback() {
-    this._registration.isConnected = false;
+    if (currentFocusOnNavigateElement === this) {
+      currentFocusOnNavigateElement = null;
+    }
   }
 }

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

@@ -58,6 +58,11 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         if (AssignedRenderMode is not null)
         {
+            // When interactivity is enabled, functionality is handled via JS interop.
+            // We don't need to render anything to the page in that case.
+            // In non-interactive scenarios, a custom element is rendered so that
+            // JS logic can find it and focus the element matching the specified
+            // selector.
             return;
         }
 

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

@@ -16,6 +16,8 @@
         <NotFound>There's nothing here</NotFound>
     </Router>
     <script>
+        // This script must come before blazor.web.js to test that
+        // the framework does the right then when an element is already focused.
         const elementToFocus = document.querySelector('[data-focus-on-load]');
         if (elementToFocus) {
             elementToFocus.focus();

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/FocusOnNavigate/StreamRendered.razor

@@ -1,5 +1,6 @@
 @page "/focus-on-navigate/stream"
 @using System.Threading.Channels
+@using System.Diagnostics
 @attribute [StreamRendering]
 
 <h1>Stream rendered element to focus</h1>
@@ -37,6 +38,8 @@
                 case RemoveElementMessage removeElement:
                     _elements.RemoveAt(removeElement.index);
                     break;
+                default:
+                    throw new UnreachableException($"Unknown message '{message}'");
             }
 
             StateHasChanged();