[Button] Add StopPropagation + UnitTests (#2732)

Co-authored-by: Denis Voituron <dvoituron@outlook.com>
microsoft · Sep 28, 2024 · d819a17 · d819a17
1 parent 07cab03
commit d819a17
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 0 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -926,6 +926,11 @@
             The text usually displayed in a 'tooltip' popup when the mouse is over the button.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.StopPropagation">
+            <summary>
+            Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.ChildContent">
             <summary>
             Gets or sets the content to be rendered inside the component.

diff --git a/src/Core/Components/Button/FluentButton.razor b/src/Core/Components/Button/FluentButton.razor
@@ -40,6 +40,7 @@ else
                title=@Title
                appearance=@Appearance.ToAttributeValue()
                @onclick="@OnClickHandlerAsync"
+               @onclick:stopPropagation="@StopPropagation"
                @attributes="AdditionalAttributes">
             @if (IconStart != null)
             {

diff --git a/src/Core/Components/Button/FluentButton.razor.cs b/src/Core/Components/Button/FluentButton.razor.cs
@@ -151,6 +151,12 @@ public partial class FluentButton : FluentComponentBase, IAsyncDisposable
     [Parameter]
     public string? Title { get; set; }
 
+    /// <summary>
+    /// Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases.
+    /// </summary>
+    [Parameter]
+    public bool StopPropagation { get; set; } = false;
+
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.
     /// </summary>

diff --git a/tests/Core/Button/FluentButtonTests.razor b/tests/Core/Button/FluentButtonTests.razor
@@ -58,4 +58,47 @@
         // Assert
         Assert.True(clicked);
     }
+
+    [Fact]
+    public void FluentButton_StopPropagationFalse()
+    {
+        bool clickedondiv = false;
+        bool clicked = false;
+
+        // Arrange
+        // Not adding StopPropagation here explicitly because it is false by default
+        var cut = Render(@<div @onclick="@(e => {clickedondiv = true; })">
+                            <FluentButton OnClick="@(e => { clicked = true; } )">
+                                My button
+                            </FluentButton>
+                          </div>);
+
+        // Act
+        cut.Find("fluent-button").Click();
+
+        // Assert
+        Assert.True(clickedondiv);
+        Assert.True(clicked);
+    }
+
+    [Fact]
+    public void FluentButton_StopPropagationTrue()
+    {
+        bool clickedondiv = false;
+        bool clicked = false;
+
+        // Arrange
+        var cut = Render(@<div @onclick="@(e => {clickedondiv = true; })">
+                            <FluentButton StopPropagation="true" OnClick="@(e => { clicked = true; } )">
+                                My button
+                            </FluentButton>
+                          </div>);
+
+        // Act
+        cut.Find("fluent-button").Click();
+
+        // Assert
+        Assert.False(clickedondiv);
+        Assert.True(clicked);
+    }
 }