Fix shortcuts changing multiple browser windows (dotnet#2470)

* Fix shortcuts changing multiple browser windows

* Clean up

(cherry picked from commit fcadd63)

src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor

@@ -1,6 +1,5 @@
 @using Aspire.Dashboard.Resources
 @inject IStringLocalizer<ControlsStrings> Loc
-@implements Aspire.Dashboard.Model.IGlobalKeydownListener
 @typeparam T
 
 <div class="summary-details-container">

src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor.cs

@@ -2,6 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using System.Globalization;
+using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
@@ -11,7 +12,7 @@
 
 namespace Aspire.Dashboard.Components.Controls;
 
-public partial class SummaryDetailsView<T>
+public partial class SummaryDetailsView<T> : IGlobalKeydownListener, IDisposable
 {
     [Parameter]
     public RenderFragment? Summary { get; set; }
@@ -60,6 +61,9 @@ public partial class SummaryDetailsView<T>
     [Inject]
     public required IJSRuntime JS { get; set; }
 
+    [Inject]
+    public required ShortcutManager ShortcutManager { get; set; }
+
     private readonly Icon _splitHorizontalIcon = new Icons.Regular.Size16.SplitHorizontal();
     private readonly Icon _splitVerticalIcon = new Icons.Regular.Size16.SplitVertical();
 

src/Aspire.Dashboard/Components/Layout/MainLayout.razor

@@ -1,8 +1,6 @@
 @using Aspire.Dashboard.Components.CustomIcons;
 @using Aspire.Dashboard.Resources
 @inherits LayoutComponentBase
-@implements Aspire.Dashboard.Model.IGlobalKeydownListener
-@implements IAsyncDisposable
 
 <div class="layout">
     <div class="aspire-icon">

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.cs

@@ -11,12 +11,13 @@
 
 namespace Aspire.Dashboard.Components.Layout;
 
-public partial class MainLayout
+public partial class MainLayout : IGlobalKeydownListener, IAsyncDisposable
 {
     private IDisposable? _themeChangedSubscription;
     private IDisposable? _locationChangingRegistration;
     private IJSObjectReference? _jsModule;
     private IJSObjectReference? _keyboardHandlers;
+    private DotNetObjectReference<ShortcutManager>? _shortcutManagerReference;
     private IDialogReference? _openPageDialog;
 
     private const string SettingsDialogId = "SettingsDialog";
@@ -40,6 +41,9 @@ public partial class MainLayout
     [Inject]
     public required IDashboardClient DashboardClient { get; init; }
 
+    [Inject]
+    public required ShortcutManager ShortcutManager { get; init; }
+
     protected override void OnInitialized()
     {
         // Theme change can be triggered from the settings dialog. This logic applies the new theme to the browser window.
@@ -75,7 +79,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/theme.js");
-            _keyboardHandlers = await JS.InvokeAsync<IJSObjectReference>("window.registerGlobalKeydownListener", typeof(App).Assembly.GetName().Name);
+            _shortcutManagerReference = DotNetObjectReference.Create(ShortcutManager);
+            _keyboardHandlers = await JS.InvokeAsync<IJSObjectReference>("window.registerGlobalKeydownListener", _shortcutManagerReference);
             ShortcutManager.AddGlobalKeydownListener(this);
 
             DialogService.OnDialogCloseRequested += (reference, _) =>
@@ -178,15 +183,21 @@ public async Task OnPageKeyDownAsync(KeyboardEventArgs args)
         }
     }
 
-    public void Dispose()
+    public async ValueTask DisposeAsync()
     {
+        _shortcutManagerReference?.Dispose();
         _themeChangedSubscription?.Dispose();
         _locationChangingRegistration?.Dispose();
         ShortcutManager.RemoveGlobalKeydownListener(this);
-    }
 
-    public async ValueTask DisposeAsync()
-    {
-        await JS.InvokeVoidAsync("window.unregisterGlobalKeydownListener", _keyboardHandlers);
+        try
+        {
+            await JS.InvokeVoidAsync("window.unregisterGlobalKeydownListener", _keyboardHandlers);
+        }
+        catch (JSDisconnectedException)
+        {
+            // Per https://learn.microsoft.com/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-7.0#javascript-interop-calls-without-a-circuit
+            // this is one of the calls that will fail if the circuit is disconnected, and we just need to catch the exception so it doesn't pollute the logs
+        }
     }
 }

src/Aspire.Dashboard/DashboardWebApplication.cs

@@ -104,6 +104,8 @@ public DashboardWebApplication(Action<WebApplicationBuilder>? configureBuilder =
         builder.Services.AddFluentUIComponents();
 
         builder.Services.AddSingleton<ThemeManager>();
+        // ShortcutManager is scoped because we want shortcuts to apply one browser window.
+        builder.Services.AddScoped<ShortcutManager>();
 
         builder.Services.AddLocalization();
 

src/Aspire.Dashboard/Model/IGlobalKeydownListener.cs

@@ -5,7 +5,7 @@
 
 namespace Aspire.Dashboard.Model;
 
-public interface IGlobalKeydownListener : IDisposable
+public interface IGlobalKeydownListener
 {
     Task OnPageKeyDownAsync(KeyboardEventArgs args);
 }

src/Aspire.Dashboard/ShortcutManager.cs

@@ -8,23 +8,28 @@
 
 namespace Aspire.Dashboard;
 
-public static class ShortcutManager
+public sealed class ShortcutManager : IDisposable
 {
-    private static readonly ConcurrentDictionary<IGlobalKeydownListener, IGlobalKeydownListener> s_globalKeydownListenerComponents = [];
+    private readonly ConcurrentDictionary<IGlobalKeydownListener, IGlobalKeydownListener> _keydownListenerComponents = [];
 
-    public static void AddGlobalKeydownListener(IGlobalKeydownListener listener)
+    public void AddGlobalKeydownListener(IGlobalKeydownListener listener)
     {
-        s_globalKeydownListenerComponents[listener] = listener;
+        _keydownListenerComponents[listener] = listener;
     }
 
-    public static void RemoveGlobalKeydownListener(IGlobalKeydownListener listener)
+    public void RemoveGlobalKeydownListener(IGlobalKeydownListener listener)
     {
-        s_globalKeydownListenerComponents.Remove(listener, out _);
+        _keydownListenerComponents.Remove(listener, out _);
     }
 
     [JSInvokable]
-    public static Task OnGlobalKeyDown(KeyboardEventArgs args)
+    public Task OnGlobalKeyDown(KeyboardEventArgs args)
     {
-        return Task.WhenAll(s_globalKeydownListenerComponents.Values.Select(component => component.OnPageKeyDownAsync(args)));
+        return Task.WhenAll(_keydownListenerComponents.Values.Select(component => component.OnPageKeyDownAsync(args)));
+    }
+
+    public void Dispose()
+    {
+        _keydownListenerComponents.Clear();
     }
 }

src/Aspire.Dashboard/wwwroot/js/app.js

@@ -275,27 +275,33 @@ function isInputElement(element, isRoot, isShadowRoot) {
     const tag = element.tagName.toLowerCase();
     // comes from https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event
     // fluent-select does not use <select /> element
-    if (tag === "input" || tag === "textarea" || tag === "select" || tag === "fluent-select") return true;
+    if (tag === "input" || tag === "textarea" || tag === "select" || tag === "fluent-select") {
+        return true;
+    }
 
     if (isShadowRoot || isRoot) {
         const elementChildren = element.children;
         for (let i = 0; i < elementChildren.length; i++) {
-            if (isInputElement(elementChildren[i], false, isShadowRoot)) return true;
+            if (isInputElement(elementChildren[i], false, isShadowRoot)) {
+                return true;
+            }
         }
     }
 
     const shadowRoot = element.shadowRoot;
     if (shadowRoot) {
         const shadowRootChildren = shadowRoot.children;
         for (let i = 0; i < shadowRootChildren.length; i++) {
-            if (isInputElement(shadowRootChildren[i], false, true)) return true;
+            if (isInputElement(shadowRootChildren[i], false, true)) {
+                return true;
+            }
         }
     }
 
     return false;
 }
 
-window.registerGlobalKeydownListener = function(assemblyName) {
+window.registerGlobalKeydownListener = function(shortcutManager) {
     const serializeEvent = function (e) {
         if (e) {
             return {
@@ -314,7 +320,7 @@ window.registerGlobalKeydownListener = function(assemblyName) {
 
     const keydownListener = function (e) {
         if (!isActiveElementInput()) {
-            DotNet.invokeMethodAsync(assemblyName, 'OnGlobalKeyDown', serializeEvent(e))
+            shortcutManager.invokeMethodAsync('OnGlobalKeyDown', serializeEvent(e));
         }
     }