Fix for #81

stavroskasidis · Sep 8, 2020 · fc7e334 · fc7e334
1 parent d92da1c
commit fc7e334
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/BlazorContextMenu/Components/Item.razor b/BlazorContextMenu/Components/Item.razor
@@ -7,6 +7,7 @@
 <li @attributes="Attributes"
     id="@Id"
     @onclick="@((e) => OnClickInternal(e))"
+    @onclick:stopPropagation="true"
     class="@("blazor-context-menu__item " + ClassCalc)"
     style="@(Visible ? "display:block;" : "display:none;")"
     itemEnabled="@Enabled.ToString().ToLower()"

diff --git a/BlazorContextMenu/wwwroot/blazorContextMenu.js b/BlazorContextMenu/wwwroot/blazorContextMenu.js
@@ -119,6 +119,7 @@ var blazorContextMenu = function (blazorContextMenu) {
         var triggerDotnetRef = JSON.parse(e.currentTarget.dataset["dotnetref"]);
         showMenuCommon(menu, menuId, e.x, e.y, e.target, triggerDotnetRef);
         e.preventDefault();
+        e.stopPropagation();
         return false;
     };
 

diff --git a/TestApps/BlazorContextMenu.TestAppsCommon/CommonIndex.razor b/TestApps/BlazorContextMenu.TestAppsCommon/CommonIndex.razor
@@ -119,6 +119,36 @@
     <button id="showAndHideMenuBtn" @onclick="ShowAndHideMenuBtnClick">Show menu1 in 300x300 using handler and hide after 2 seconds</button>
 </div>
 
+<hr />
+
+<ContextMenuTrigger MenuId="menu2">
+    <div>
+        <p id="test-propagation-right">Test Nested Menu. Here is menu2 (Right-click)</p>
+        <ContextMenuTrigger MenuId="menu1">
+            <p id="test-propagation-right-child">In here is menu1</p>
+        </ContextMenuTrigger>
+    </div>
+</ContextMenuTrigger>
+
+<ContextMenuTrigger MenuId="menu2" MouseButtonTrigger="MouseButtonTrigger.Left">
+    <div>
+        <p id="test-propagation-left">Test Nested Menu. Here is menu2 (Left-click)</p>
+        <ContextMenuTrigger MenuId="menu1" MouseButtonTrigger="MouseButtonTrigger.Left">
+            <p id="test-propagation-left-child">In here is menu1</p>
+        </ContextMenuTrigger>
+    </div>
+</ContextMenuTrigger>
+
+<ContextMenuTrigger MenuId="menu2" MouseButtonTrigger="MouseButtonTrigger.DoubleClick">
+    <div>
+        <p id="test-propagation-double">Test Nested Menu. Here is menu2 (Double-click)</p>
+        <ContextMenuTrigger MenuId="menu1" MouseButtonTrigger="MouseButtonTrigger.DoubleClick">
+            <p id="test-propagation-double-child">In here is menu1</p>
+        </ContextMenuTrigger>
+    </div>
+</ContextMenuTrigger>
+
+
 <NavLink href="/TodoList">Go to Todo List</NavLink>
 @code{
     private bool menu1Autoclose = true;

diff --git a/Tests/BlazorContextMenu.TestsCommon/CommonTests/TestAppIndexTests.cs b/Tests/BlazorContextMenu.TestsCommon/CommonTests/TestAppIndexTests.cs
@@ -351,5 +351,30 @@ public async Task Menu4_TriggerAndClickOutside_MenuStaysOpen()
             var display = menuElement.GetCssValue("display");
             Assert.Equal(expectedDisplay, display);
         }
+
+
+        [Theory]
+        [InlineData("test-propagation-right-child", MouseButtonTrigger.Right)]
+        [InlineData("test-propagation-left-child", MouseButtonTrigger.Left)]
+        [InlineData("test-propagation-double-child", MouseButtonTrigger.DoubleClick)]
+        public async Task Menu1_TriggerNested_Menu1OpensButMenu2DoesNot(string triggerId,MouseButtonTrigger mouseButton)
+        {
+            //Arrange
+            var menu1ExpectedDisplay = "block";
+            var menu2ExpectedDisplay = "none";
+
+            //Act
+            await OpenContextMenuAt(triggerId, mouseButton);
+
+            //Assert
+            var menu1Element = Browser.FindElement(By.Id("menu1"));
+            var display1 = menu1Element.GetCssValue("display");
+            Assert.Equal(menu1ExpectedDisplay, display1);
+
+            var menu2Element = Browser.FindElement(By.Id("menu2"));
+            var display2 = menu2Element.GetCssValue("display");
+            Assert.Equal(menu2ExpectedDisplay, display2);
+
+        }
     }
 }