Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
[Button] Add StopPropagation parameter + UnitTests
  • Loading branch information
vnbaaij committed Sep 28, 2024
commit 5f5f464445d0e86eb020f7ab3c3cd425be5177c7
1 change: 1 addition & 0 deletions src/Core/Components/Button/FluentButton.razor
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
title="@Title"
appearance="@(Appearance == ButtonAppearance.Default ? null : Appearance.ToAttributeValue())"
@onclick="@OnClickHandlerAsync"
@onclick:stopPropagation="@StopPropagation"
@attributes="AdditionalAttributes">
@if (IconStart != null)
{
Expand Down
6 changes: 6 additions & 0 deletions src/Core/Components/Button/FluentButton.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,12 @@ public partial class FluentButton : FluentComponentBase
[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>
Expand Down
44 changes: 44 additions & 0 deletions tests/Core/Components/Button/FluentButtonTests.razor
Original file line number Diff line number Diff line change
Expand Up @@ -392,4 +392,48 @@
// Assert
cut.Verify();
}

[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);
}
}
}