Fix for #114

stavroskasidis · Mar 17, 2022 · aa742f1 · aa742f1
1 parent 88f4309
commit aa742f1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/BlazorContextMenu.sln b/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

diff --git a/BlazorContextMenu/wwwroot/blazorContextMenu.js b/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();

diff --git a/TestApps/BlazorContextMenu.TestAppsCommon/CommonIndex.razor b/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>
@@ -122,6 +126,11 @@
     <Item Id="menu4-item2" OnClick="OnClick">Item 2</Item>
 </ContextMenu>
 
+<ContextMenu Id="menu6" >
+    <Item Id="menu4-item1" OnClick="OnClick"><ItemChild>Item 1</ItemChild></Item>
+    <Item Id="menu4-item2" OnClick="OnClick"><ItemChild>Item 2</ItemChild></Item>
+</ContextMenu>
+
 <div>
     <button id="showMenuBtn" @onclick="ShowMenuBtnOnClick">Show menu1 in 300x300 using handler</button>
     <button id="showNoAutoCloseBtn" @onclick="ShowNoAutoCloseBtnOnClick">Show menu1 in 300x300 using handler</button>

diff --git a/TestApps/BlazorContextMenu.TestAppsCommon/ItemChild.razor b/TestApps/BlazorContextMenu.TestAppsCommon/ItemChild.razor
@@ -0,0 +1,5 @@
+@ChildContent
+
+@code {
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}
diff --git a/TestApps/BlazorContextMenu.TestAppsCommon/wwwroot/css/site.css b/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,