[dev-v5][Dialog] Return focus to element when dialog is closed

src/Core.Scripts/src/Components/Dialog/FluentDialog.ts

@@ -10,11 +10,41 @@ export namespace Microsoft.FluentUI.Blazor.Components.Dialog {
   }
 
   /**
- * Hide the fluent-dialog with the given id
- * @param id The id of the fluent-dialog to hide
- */
+   * Hide the fluent-dialog with the given id
+   * @param id The id of the fluent-dialog to hide
+   */
   export function Hide(id: string): void {
     const dialog = document.getElementById(id) as any;
     dialog?.hide();
+    FocusOnPreviousActiveElement(id);
+  }
+
+  /**
+    * Save the element that was active before the dialog was opened
+    * @param id
+    */
+  export function DialogToggle_PreviousActiveElement(id: string, newState: string): void {
+    const dialog = document.getElementById(id) as any;
+    if (dialog) {
+      if (newState === 'open') {
+        dialog.previousActiveElement = document.activeElement;
+      }
+      else if (newState === 'closed') {
+        FocusOnPreviousActiveElement(id);
+      }
+    }
+  }
+
+  /**
+   * Focus on the element that was active before the dialog was opened
+   * @param id
+   */
+  export function FocusOnPreviousActiveElement(id: string): void {
+    const dialog = document.getElementById(id) as any;
+    if (dialog) {
+      setTimeout(() => {
+        dialog.previousActiveElement?.focus();
+      }, 25);
+    }
   }
 }

src/Core.Scripts/src/FluentUICustomEvents.ts

@@ -1,3 +1,5 @@
+import { Microsoft as FluentDialogFile } from "./Components/Dialog/FluentDialog";
+
 export namespace Microsoft.FluentUI.Blazor.FluentUICustomEvents {
 
   /**
@@ -28,6 +30,7 @@ export namespace Microsoft.FluentUI.Blazor.FluentUICustomEvents {
     blazor.registerCustomEventType('dialogbeforetoggle', {
       browserEventName: 'beforetoggle',
       createEventArgs: (event: any) => {
+        FluentDialogFile.FluentUI.Blazor.Components.Dialog.DialogToggle_PreviousActiveElement(event.target.id, event.detail?.newState ?? event.newState);
         return {
           id: event.target.id,
           type: event.type,
@@ -130,7 +133,7 @@ export namespace Microsoft.FluentUI.Blazor.FluentUICustomEvents {
           newState: event.detail?.newState ?? event.newState,
         };
       }
-    }); 
+    });
   }
 
   // [^^^ Add your other custom events before this line ^^^]

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

@@ -12,7 +12,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
 /// The dialog component is a window overlaid on either the primary window or another dialog window.
-/// Windows under a modal dialog are inert. 
+/// Windows under a modal dialog are inert.
 /// </summary>
 public partial class FluentDialog : FluentComponentBase
 {
@@ -75,11 +75,7 @@ public FluentDialog(LibraryConfiguration configuration) : base(configuration)
     [Parameter]
     public EventCallback<DialogEventArgs> OnStateChange { get; set; }
 
-    /// <summary>
-    /// 
-    /// </summary>
-    /// <param name="firstRender"></param>
-    /// <returns></returns>
+    /// <summary />
     protected override Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender && LaunchedFromService)

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

@@ -4,6 +4,8 @@
 
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -13,6 +15,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class DialogService : FluentServiceBase<IDialogInstance>, IDialogService
 {
     private readonly IServiceProvider _serviceProvider;
+    private readonly IJSRuntime _jsRuntime;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="DialogService"/> class.
@@ -25,6 +28,7 @@ public partial class DialogService : FluentServiceBase<IDialogInstance>, IDialog
     public DialogService(IServiceProvider serviceProvider, IFluentLocalizer? localizer)
     {
         _serviceProvider = serviceProvider;
+        _jsRuntime = serviceProvider.GetRequiredService<IJSRuntime>();
         Localizer = localizer ?? FluentLocalizerInternal.Default;
     }
 
@@ -104,11 +108,11 @@ public virtual async Task<DialogResult> ShowDialogAsync([DynamicallyAccessedMemb
     /// <param name="dialog"></param>
     /// <returns></returns>
     /// <exception cref="InvalidOperationException"></exception>
-    internal Task RemoveDialogFromProviderAsync(IDialogInstance? dialog)
+    internal async Task RemoveDialogFromProviderAsync(IDialogInstance? dialog)
     {
         if (dialog is null)
         {
-            return Task.CompletedTask;
+            return;
         }
 
         // Remove the HTML code from the DialogProvider
@@ -117,6 +121,7 @@ internal Task RemoveDialogFromProviderAsync(IDialogInstance? dialog)
             throw new InvalidOperationException($"Failed to remove dialog from DialogProvider: the ID '{dialog.Id}' doesn't exist in the DialogServiceProvider.");
         }
 
-        return ServiceProvider.OnUpdatedAsync.Invoke(dialog);
+        await ServiceProvider.OnUpdatedAsync.Invoke(dialog);
+        await _jsRuntime.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Components.Dialog.FocusOnPreviousActiveElement", dialog.Id);
     }
 }