Return focus when dialog is closed to element focused before open (#4095)

* return dialog focus after close

* block dialog open on getting active element

* fix test, don't version file

* remove extra newline

* apply review suggestions

* add interop mode of Loose to match other components

* Update DialogInstance.cs

Previously focused element is nullable

---------

Co-authored-by: Vincent Baaij <[email protected]>

Author: adamint

src/Core/Components/Dialog/FluentDialog.razor.cs

@@ -263,6 +263,14 @@ public async Task CloseAsync(DialogResult dialogResult)
             {
                 await Instance.Parameters.OnDialogResult.InvokeAsync(dialogResult);
             }
+
+            if (DialogContext is not null && Instance.PreviouslyFocusedElement is not null)
+            {
+                // Dialog does not close instantly, wait a little while to ensure that it has closed
+                // before trying to set focus. If dialog is not closed, focus cannot be set.
+                await Task.Delay(50);
+                await DialogContext.DialogContainer.ReturnFocusAsync(Instance.PreviouslyFocusedElement);
+            }
         }
         else
         {

src/Core/Components/Dialog/FluentDialogProvider.razor.cs

@@ -4,20 +4,31 @@
 
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
+using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
-public partial class FluentDialogProvider : IDisposable
+public partial class FluentDialogProvider : IAsyncDisposable
 {
+    private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Dialog/FluentDialogProvider.razor.js";
+
     private readonly InternalDialogContext _internalDialogContext;
     private readonly RenderFragment _renderDialogs;
+    private IJSObjectReference? _module;
 
     [Inject]
     private IDialogService DialogService { get; set; } = default!;
 
     [Inject]
     private NavigationManager NavigationManager { get; set; } = default!;
 
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = default!;
+
+    [Inject]
+    private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
     /// <summary>
     /// Constructs an instance of <see cref="FluentToastProvider"/>.
     /// </summary>
@@ -40,20 +51,43 @@ protected override void OnInitialized()
         DialogService.OnDialogCloseRequested += DismissInstance;
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+        }
+    }
+
     private void ShowDialog(IDialogReference dialogReference, Type? dialogComponent, DialogParameters parameters, object content)
     {
-        DialogInstance dialog = new(dialogComponent, parameters, content);
-        dialogReference.Instance = dialog;
+        if (_module is null)
+        {
+            throw new InvalidOperationException("JS module is not loaded.");
+        }
 
-        _internalDialogContext.References.Add(dialogReference);
-        InvokeAsync(StateHasChanged);
+        InvokeAsync(async () =>
+        {
+            var previouslyFocusedElement = await _module.InvokeAsync<IJSObjectReference>("getActiveElement");
+            DialogInstance dialog = new(dialogComponent, parameters, content, previouslyFocusedElement);
+            dialogReference.Instance = dialog;
+
+            _internalDialogContext.References.Add(dialogReference);
+        });
     }
 
     private async Task<IDialogReference> ShowDialogAsync(IDialogReference dialogReference, Type? dialogComponent, DialogParameters parameters, object content)
     {
-        return await Task.Run(() =>
+        if (_module is null)
         {
-            DialogInstance dialog = new(dialogComponent, parameters, content);
+            throw new InvalidOperationException("JS module is not loaded.");
+        }
+
+        return await Task.Run(async () =>
+        {
+            var previouslyFocusedElement = await _module.InvokeAsync<IJSObjectReference>("getActiveElement");
+
+            DialogInstance dialog = new(dialogComponent, parameters, content, previouslyFocusedElement);
             dialogReference.Instance = dialog;
 
             _internalDialogContext.References.Add(dialogReference);
@@ -130,6 +164,17 @@ internal void DismissInstance(string id, DialogResult result)
         }
     }
 
+    internal async Task ReturnFocusAsync(IJSObjectReference element)
+    {
+        if (_module is null)
+        {
+            throw new InvalidOperationException("JS module is not loaded.");
+        }
+
+        await _module.InvokeVoidAsync("focusElement", element);
+        await element.DisposeAsync();
+    }
+
     internal IDialogReference? GetDialogReference(string id)
     {
         return _internalDialogContext.References.SingleOrDefault(x => x.Id == id);
@@ -183,11 +228,25 @@ private async Task OnDismissAsync(DialogEventArgs args)
         }
     }
 
-    public void Dispose()
+    public async ValueTask DisposeAsync()
     {
         if (NavigationManager != null)
         {
             NavigationManager.LocationChanged -= LocationChanged;
         }
+
+        try
+        {
+            if (_module is not null)
+            {
+                await _module.DisposeAsync();
+            }
+        }
+        catch (Exception ex) when (ex is JSDisconnectedException ||
+                                   ex is OperationCanceledException)
+        {
+            // The JSRuntime side may routinely be gone already if the reason we're disposing is that
+            // the client disconnected. This is not an error.
+        }
     }
 }

src/Core/Components/Dialog/FluentDialogProvider.razor.js

@@ -0,0 +1,9 @@
+export function getActiveElement() {
+    return document.activeElement
+}
+
+export function focusElement(element) {
+    if (!!element) {
+        element.focus();
+    }
+}

src/Core/Components/Dialog/Services/DialogInstance.cs

@@ -2,16 +2,19 @@
 // This file is licensed to you under the MIT License.
 // ------------------------------------------------------------------------
 
+using Microsoft.JSInterop;
+
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public sealed class DialogInstance
 {
-    public DialogInstance(Type? type, DialogParameters parameters, object content)
+    public DialogInstance(Type? type, DialogParameters parameters, object content, IJSObjectReference? previouslyFocusedElement)
     {
         ContentType = type;
         Parameters = parameters;
         Content = content;
         Id = Parameters.Id ?? Identifier.NewId();
+        PreviouslyFocusedElement = previouslyFocusedElement;
     }
 
     public string Id { get; }
@@ -22,6 +25,8 @@ public DialogInstance(Type? type, DialogParameters parameters, object content)
 
     public DialogParameters Parameters { get; internal set; }
 
+    internal IJSObjectReference? PreviouslyFocusedElement { get; }
+
     internal Dictionary<string, object>? GetParameterDictionary()
     {
         if (Content is null)

tests/Core/Dialog/FluentDialogServiceTests.razor

@@ -8,7 +8,10 @@
 
     public FluentDialogServiceTests()
     {
+        JSInterop.Mode = JSRuntimeMode.Loose;
         Services.AddSingleton(LibraryConfiguration);
+        var dialogUtilsModule = JSInterop.SetupModule("./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Dialog/FluentDialogProvider.razor.js");
+        dialogUtilsModule.SetupModule("getActiveElement", _ => true);
     }
 
     [Fact]