Merge pull request #117 from stavroskasidis/release/1.13

Release/1.13

Author: stavroskasidis

BlazorContextMenu.sln

@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 16.0.28621.142
+# Visual Studio Version 17
+VisualStudioVersion = 17.1.32228.430
 MinimumVisualStudioVersion = 15.0.26124.0
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorContextMenu", "BlazorContextMenu\BlazorContextMenu.csproj", "{40AD3140-7529-4E0F-8E7F-8F989A1D1B28}"
 EndProject

BlazorContextMenu/BlazorContextMenu.csproj

@@ -16,7 +16,7 @@
     <Copyright />
     <PackageTags>blazor blazor-component blazor-context-menu context-menu contextmenu menu blazor-menu blazorcontextmenu razor razor-components razorcomponents</PackageTags>
     <VersionSuffix>$(VersionSuffix)</VersionSuffix>
-    <Version>1.12.0</Version>
+    <Version>1.13.0</Version>
     <Version Condition=" '$(VersionSuffix)' != '' ">$(Version)-$(VersionSuffix)</Version>
     <Product>Blazor.ContextMenu</Product>
   </PropertyGroup>

BlazorContextMenu/wwwroot/blazorContextMenu.js

@@ -38,13 +38,10 @@ var blazorContextMenu = function (blazorContextMenu) {
         function recurse(element, className, found) {
             for (var i = 0; i < element.children.length && !found; i++) {
                 var el = element.children[i];
-                var classes = el.className != undefined ? el.className.split(" ") : [];
-                for (var j = 0, jl = classes.length; j < jl; j++) {
-                    if (classes[j] == className) {
-                        found = true;
-                        foundElement = element.children[i];
-                        break;
-                    }
+                if (el.classList.contains(className)) {
+                    found = true;
+                    foundElement = element.children[i];
+                    break;
                 }
                 if (found)
                     break;
@@ -60,11 +57,8 @@ var blazorContextMenu = function (blazorContextMenu) {
         function recurse(element, className) {
             for (var i = 0; i < element.children.length; i++) {
                 var el = element.children[i];
-                var classes = el.className != undefined ? el.className.split(" ") : [];
-                for (var j = 0, jl = classes.length; j < jl; j++) {
-                    if (classes[j] == className) {
-                        foundElements.push(element.children[i]);
-                    }
+                if (el.classList.contains(className)) {
+                    foundElements.push(element.children[i]);
                 }
                 recurse(element.children[i], className);
             }
@@ -107,15 +101,15 @@ var blazorContextMenu = function (blazorContextMenu) {
         //openingMenu = true;
         var menu = document.getElementById(menuId);
         if (!menu) throw new Error("No context menu with id '" + menuId + "' was found");
-        addToOpenMenus(menu,menuId, null);
+        addToOpenMenus(menu, menuId, null);
         showMenuCommon(menu, menuId, x, y, null, null);
     }
 
     blazorContextMenu.OnContextMenu = function (e, menuId, stopPropagation) {
         //openingMenu = true;
         var menu = document.getElementById(menuId);
         if (!menu) throw new Error("No context menu with id '" + menuId + "' was found");
-        addToOpenMenus(menu,menuId, e.target);
+        addToOpenMenus(menu, menuId, e.target);
         var triggerDotnetRef = JSON.parse(e.currentTarget.dataset["dotnetref"]);
         showMenuCommon(menu, menuId, e.x, e.y, e.target, triggerDotnetRef);
         e.preventDefault();

README.md

@@ -244,7 +244,13 @@ public class Startup
 </details>
 
 ## Release Notes
-<details open="open"><summary>1.12</summary>
+<details open="open"><summary>1.13</summary>
+
+>- Fix for [#114](https://github.com/stavroskasidis/BlazorContextMenu/issues/114).
+</details>
+
+
+<details><summary>1.12</summary>
 
 >- Fix for [#110](https://github.com/stavroskasidis/BlazorContextMenu/issues/110). Contributed by [SebastianWachsmuth](https://github.com/SebastianWachsmuth).
 </details>

TestApps/BlazorContextMenu.TestAppsCommon/CommonIndex.razor

@@ -71,6 +71,10 @@
     <p id="test13-trigger">Right-Click me (menu5 hides on mouseup)</p>
 </ContextMenuTrigger>
 
+<ContextMenuTrigger MenuId="menu6">
+    <p id="test14-trigger">Right-Click me (menu6 - items contain nested components)</p>
+</ContextMenuTrigger>
+
 
 <ContextMenu Id="menu1" Template="dark" OnAppearing="OnAppearingMenu1">
     <Item Id="menu1-item1" OnClick="FetchDataClick">Fetch Data</Item>
@@ -118,8 +122,13 @@
 </ContextMenu>
 
 <ContextMenu Id="menu5" AutoHideEvent="AutoHideEvent.MouseUp" >
-    <Item Id="menu4-item1" OnClick="OnClick">Item 1</Item>
-    <Item Id="menu4-item2" OnClick="OnClick">Item 2</Item>
+    <Item Id="menu5-item1" OnClick="OnClick">Item 1</Item>
+    <Item Id="menu5-item2" OnClick="OnClick">Item 2</Item>
+</ContextMenu>
+
+<ContextMenu Id="menu6" >
+    <Item Id="menu6-item1" OnClick="OnClick"><ItemChild>Item 1</ItemChild></Item>
+    <Item Id="menu6-item2" OnClick="OnClick"><ItemChild>Item 2</ItemChild></Item>
 </ContextMenu>
 
 <div>

TestApps/BlazorContextMenu.TestAppsCommon/ItemChild.razor

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1,5" stroke-linecap="round" stroke-linejoin="round" class="feather mr-4 inline-block feather-eye"><!--!--><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+
+@ChildContent
+
+@code {
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}

TestApps/BlazorContextMenu.TestAppsCommon/wwwroot/css/site.css

@@ -156,7 +156,6 @@ div.dark-menu {
 .dark-menu .dark-menu-item--disabled,
 .dark-menu .dark-menu-item {
     background-color: #444;
-    backdrop-filter: blur(2px) contrast(.3);
 }
 
     .dark-menu .dark-menu-item--disabled:hover,

Tests/BlazorContextMenu.TestsCommon/CommonTests/TestAppIndexTests.cs

@@ -412,5 +412,22 @@ public async Task Menu5_TriggerAndMouseDownOnHeader_MenuStaysOpen()
             var display = menuElement.GetCssValue("display");
             Assert.Equal(expectedDisplay, display);
         }
+
+        [Fact]
+        public async Task Menu6_TriggerAndClickOutside_MenuCloses()
+        {
+            //Arrange
+            var expectedDisplay = "none";
+
+            //Act
+            await OpenContextMenuAt("test14-trigger", MouseButtonTrigger.Right);
+            var headerElement = Browser.FindElement(By.Id("header"));
+            headerElement.Click();
+
+            //Assert
+            var menuElement = Browser.FindElement(By.Id("menu6"));
+            var display = menuElement.GetCssValue("display");
+            Assert.Equal(expectedDisplay, display);
+        }
     }
 }