Fix #1205 FluentButton submit does not work outside the EditForm #v3

Microsoft.FluentUI.sln

@@ -65,8 +65,6 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 EndProject
 Project("{54A90642-561A-4BB1-A94E-469ADEE60C69}") = "Microsoft.FluentUI.AspNetCore.Components.Assets", "src\Core.Assets\Microsoft.FluentUI.AspNetCore.Components.Assets.esproj", "{292081C2-5076-467C-AEFF-12DC0617531A}"
 EndProject
-Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "TemplateValidation", "TemplateValidation", "{C2BD02DF-9FF9-4D0C-915E-EA1BD11585A8}"
-EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -141,7 +139,6 @@ Global
 		{17F26C55-E329-4117-B64D-0393E912FFFE} = {9468ADD1-3660-410D-8231-6F89384D135D}
 		{E4E62EAA-38FC-48FE-B63E-EB4ABAD660D2} = {17F26C55-E329-4117-B64D-0393E912FFFE}
 		{292081C2-5076-467C-AEFF-12DC0617531A} = {DF88C07D-46D7-4DEC-ACE4-409217634E57}
-		{C2BD02DF-9FF9-4D0C-915E-EA1BD11585A8} = {EBE3ACB2-9B23-4F91-9953-7153E3D2B0DA}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {420693A7-C2FD-498C-8E78-4B65CC25389A}

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -588,6 +588,12 @@
             Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.JSRuntime">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.Module">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.Autofocus">
             <summary>
             Determines if the element should receive document focus on page load.
@@ -704,6 +710,9 @@
             Command executed when the user clicks on the button.
             </summary>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnAfterRenderAsync(System.Boolean)">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentButton.#ctor">
             <summary>
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentButton"/>.

src/Core/Components/Button/FluentButton.razor.cs

@@ -1,13 +1,24 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
-public partial class FluentButton : FluentComponentBase
+public partial class FluentButton : FluentComponentBase, IAsyncDisposable
 {
+
+    private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Button/FluentButton.razor.js";
+
     private readonly string _customId = Identifier.NewId();
     private readonly RenderFragment _renderButton;
 
+    /// <summary />
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = default!;
+
+    /// <summary />
+    private IJSObjectReference? Module { get; set; }
+
     private bool LoadingOverlay => Loading && IconStart == null && IconEnd == null;
 
     /// <summary>
@@ -165,6 +176,16 @@ protected override void OnParametersSet()
         }
     }
 
+    /// <summary />
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && Id is not null && Type != ButtonType.Button)
+        {
+            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
+            await Module.InvokeVoidAsync("updateProxy", Id);
+        }
+    }
+
     private string? CustomId =>
         string.IsNullOrEmpty(BackgroundColor) && string.IsNullOrEmpty(Color) ? null : _customId;
 
@@ -188,14 +209,14 @@ public FluentButton()
     }
 
     /// <summary />
-    protected Task OnClickHandlerAsync(MouseEventArgs e)
+    protected async Task OnClickHandlerAsync(MouseEventArgs e)
     {
         if (!Disabled && OnClick.HasDelegate)
         {
-            return OnClick.InvokeAsync(e);
+            await OnClick.InvokeAsync(e);
         }
 
-        return Task.CompletedTask;
+        await Task.CompletedTask;
     }
 
     public void SetDisabled(bool disabled)
@@ -211,4 +232,12 @@ private string RingStyle(Icon icon)
 
         return $"width: {size}px; height: {size}px;{inverse}";
     }
+    public ValueTask DisposeAsync()
+    {
+        if (Module is not null)
+        {
+            return Module.DisposeAsync();
+        }
+        return ValueTask.CompletedTask;
+    }
 }

src/Core/Components/Button/FluentButton.razor.js

@@ -0,0 +1,11 @@
+// workaround for https://github.com/microsoft/fast/issues/5675
+export function updateProxy(id) {
+    if (!id) {
+        return;
+    }
+    const element = document.getElementById(id);
+
+    if (!!element && !!element.form) {
+        element.proxy.setAttribute("form", element.form.id)
+    }
+}

src/Core/Components/Slider/FluentSliderLabel.razor.cs

@@ -4,7 +4,7 @@
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
-public partial class FluentSliderLabel<TValue> : FluentComponentBase
+public partial class FluentSliderLabel<TValue> : FluentComponentBase, IAsyncDisposable
 {
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Slider/FluentSliderLabel.razor.js";
 
@@ -69,4 +69,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await Module.InvokeVoidAsync("updateSliderLabel", Id);
         }
     }
+
+    public ValueTask DisposeAsync()
+    {
+       if (Module is not null)
+        {
+            return Module.DisposeAsync();
+        }
+        return ValueTask.CompletedTask;
+    }
 }

tests/Core/Button/FluentButtonTests.cs

@@ -9,6 +9,11 @@ public partial class FluentButtonTests : TestContext
 {
     private static TestContext TestContext => new(); // TODO: To remove and to use the `RenderComponent` inherited method.
 
+    public FluentButtonTests()
+    {
+        TestContext.JSInterop.Mode = JSRuntimeMode.Loose;
+    }
+
     [Fact]
     public void FluentButton_Default()
     {