[Drag&Drop] Add stopPropagation to DropZone (#4045)

* Add stopPropagation to allow for nested DropZones (#3925)

* Use parameter to set stopPropagation

* Add test for StopPropagation parameter

---------

Co-authored-by: Denis Voituron <[email protected]>

Author: MarvinKlein1508

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.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1.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.FluentDropZone`1.IsOver">
             <summary />
         </member>

src/Core/Components/Drag/FluentDropZone.razor

@@ -7,6 +7,12 @@
      class=@ClassValue
      style=@StyleValue
      dragged-over=@IsOver
+     @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"

src/Core/Components/Drag/FluentDropZone.razor.cs

@@ -82,6 +82,12 @@ public partial class FluentDropZone<TItem> : FluentComponentBase
     [Parameter]
     public Action<FluentDragEventArgs<TItem>>? OnDropEnd { 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; }
+
     /// <summary />
     private bool IsOver { get; set; } = false;
 

tests/Core/Drag/FluentDragTests.FluentDrag_StopPropagationTest.verified.html

@@ -0,0 +1,5 @@
+
+<div>
+  <div draggable="true" blazor:ondrop:stoppropagation="" blazor:ondragenter:stoppropagation="" blazor:ondragend:stoppropagation="" blazor:ondragover:stoppropagation="" blazor:ondragleave:stoppropagation="" blazor:ondragstart:stoppropagation="" blazor:ondragstart="1" blazor:ondragover="2" blazor:ondragenter="3" blazor:ondragleave="4" blazor:ondragend="5" blazor:ondrop="6" blazor:ondrop:preventdefault="" b-qxma62j335="">Item 1</div>
+  <div blazor:ondrop:stoppropagation="" blazor:ondragenter:stoppropagation="" blazor:ondragend:stoppropagation="" blazor:ondragover:stoppropagation="" blazor:ondragleave:stoppropagation="" blazor:ondragstart:stoppropagation="" blazor:ondragstart="7" blazor:ondragover="8" blazor:ondragover:preventdefault="" blazor:ondragenter="9" blazor:ondragenter:preventdefault="" blazor:ondragleave="10" blazor:ondragleave:preventdefault="" blazor:ondragend="11" blazor:ondrop="12" blazor:ondrop:preventdefault="" b-qxma62j335="">Item 2</div>
+</div>

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<FluentDragContainer<int>>(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<FluentDropZone<int>>(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<FluentDropZone<int>>(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();
+    }
 }