From 353a694673816dd209f1545536b97f6f987f1beb Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Wed, 30 Jul 2025 13:58:56 +0200 Subject: [PATCH 1/3] Add stopPropagation to allow for nested DropZones (#3925) --- src/Core/Components/Drag/FluentDropZone.razor | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Core/Components/Drag/FluentDropZone.razor b/src/Core/Components/Drag/FluentDropZone.razor index 0ed49f1a90..c5f097152b 100644 --- a/src/Core/Components/Drag/FluentDropZone.razor +++ b/src/Core/Components/Drag/FluentDropZone.razor @@ -7,6 +7,12 @@ class=@ClassValue style=@StyleValue dragged-over=@IsOver + @ondrop:stopPropagation + @ondragenter:stopPropagation + @ondragend:stopPropagation + @ondragover:stopPropagation + @ondragleave:stopPropagation + @ondragstart:stopPropagation @ondragstart=@OnDragStartHandler @ondragover=@OnDragOverHandler @ondragover:preventDefault="@Droppable" From 728ebdecb9d9fa1c9c04351545f9924f0ddb455a Mon Sep 17 00:00:00 2001 From: Marvin Klein Date: Wed, 30 Jul 2025 20:41:25 +0200 Subject: [PATCH 2/3] Use parameter to set stopPropagation --- src/Core/Components/Drag/FluentDropZone.razor | 12 ++++++------ src/Core/Components/Drag/FluentDropZone.razor.cs | 6 ++++++ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Core/Components/Drag/FluentDropZone.razor b/src/Core/Components/Drag/FluentDropZone.razor index c5f097152b..ff9dc9ba1f 100644 --- a/src/Core/Components/Drag/FluentDropZone.razor +++ b/src/Core/Components/Drag/FluentDropZone.razor @@ -7,12 +7,12 @@ class=@ClassValue style=@StyleValue dragged-over=@IsOver - @ondrop:stopPropagation - @ondragenter:stopPropagation - @ondragend:stopPropagation - @ondragover:stopPropagation - @ondragleave:stopPropagation - @ondragstart:stopPropagation + @ondrop:stopPropagation="@StopPropagation" + @ondragenter:stopPropagation="@StopPropagation" + @ondragend:stopPropagation="@StopPropagation" + @ondragover:stopPropagation="@StopPropagation" + @ondragleave:stopPropagation="@StopPropagation" + @ondragstart:stopPropagation="@StopPropagation" @ondragstart=@OnDragStartHandler @ondragover=@OnDragOverHandler @ondragover:preventDefault="@Droppable" diff --git a/src/Core/Components/Drag/FluentDropZone.razor.cs b/src/Core/Components/Drag/FluentDropZone.razor.cs index 0acf89cf67..6d60674b7b 100644 --- a/src/Core/Components/Drag/FluentDropZone.razor.cs +++ b/src/Core/Components/Drag/FluentDropZone.razor.cs @@ -82,6 +82,12 @@ public partial class FluentDropZone : FluentComponentBase [Parameter] public Action>? OnDropEnd { get; set; } + /// + /// Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases. + /// + [Parameter] + public bool StopPropagation { get; set; } + /// private bool IsOver { get; set; } = false; From b645b7b0231c764038870fa703f48031bbf4985f Mon Sep 17 00:00:00 2001 From: Marvin Klein Date: Wed, 30 Jul 2025 20:46:51 +0200 Subject: [PATCH 3/3] Add test for StopPropagation parameter --- ...crosoft.FluentUI.AspNetCore.Components.xml | 5 ++ ...uentDrag_StopPropagationTest.verified.html | 5 ++ tests/Core/Drag/FluentDragTests.cs | 51 +++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 tests/Core/Drag/FluentDragTests.FluentDrag_StopPropagationTest.verified.html diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index a2614a05f5..f0bb59cbd9 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -4535,6 +4535,11 @@ This event is fired when an element is dropped on a valid drop target. + + + Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases. + + diff --git a/tests/Core/Drag/FluentDragTests.FluentDrag_StopPropagationTest.verified.html b/tests/Core/Drag/FluentDragTests.FluentDrag_StopPropagationTest.verified.html new file mode 100644 index 0000000000..9b6579d558 --- /dev/null +++ b/tests/Core/Drag/FluentDragTests.FluentDrag_StopPropagationTest.verified.html @@ -0,0 +1,5 @@ + +
+
Item 1
+
Item 2
+
\ No newline at end of file diff --git a/tests/Core/Drag/FluentDragTests.cs b/tests/Core/Drag/FluentDragTests.cs index 2237628205..f458c48612 100644 --- a/tests/Core/Drag/FluentDragTests.cs +++ b/tests/Core/Drag/FluentDragTests.cs @@ -57,4 +57,55 @@ public void FluentDrag_SimpleTest() // Assert cut.Verify(); } + + [Fact] + public void FluentDrag_StopPropagationTest() + { + // Arrange + using var ctx = new TestContext(); + + // Act + var cut = ctx.RenderComponent>(parameters => + { + parameters.Add(p => p.OnDragStart, (e) => { }); + parameters.Add(p => p.OnDragEnd, (e) => { }); + parameters.Add(p => p.OnDragEnter, (e) => { }); + parameters.Add(p => p.OnDragOver, (e) => { }); + parameters.Add(p => p.OnDragLeave, (e) => { }); + parameters.Add(p => p.OnDropEnd, (e) => { }); + + parameters.AddChildContent>(zone => + { + zone.Add(p => p.Draggable, true); + zone.Add(p => p.Item, 1); + zone.AddChildContent("Item 1"); + + zone.Add(p => p.OnDragStart, (e) => { }); + zone.Add(p => p.OnDragEnd, (e) => { }); + zone.Add(p => p.OnDragEnter, (e) => { }); + zone.Add(p => p.OnDragOver, (e) => { }); + zone.Add(p => p.OnDragLeave, (e) => { }); + zone.Add(p => p.OnDropEnd, (e) => { }); + zone.Add(p => p.StopPropagation, true); + }); + + parameters.AddChildContent>(zone => + { + zone.Add(p => p.Droppable, true); + zone.Add(p => p.Item, 2); + zone.AddChildContent("Item 2"); + + zone.Add(p => p.OnDragStart, (e) => { }); + zone.Add(p => p.OnDragEnd, (e) => { }); + zone.Add(p => p.OnDragEnter, (e) => { }); + zone.Add(p => p.OnDragOver, (e) => { }); + zone.Add(p => p.OnDragLeave, (e) => { }); + zone.Add(p => p.OnDropEnd, (e) => { }); + zone.Add(p => p.StopPropagation, true); + }); + }); + + // Assert + cut.Verify(); + } }