Merge branch 'master' of https://github.com/stavroskasidis/BlazorContextMenu

Author: stavroskasidis

BlazorContextMenu/BlazorContextMenu.csproj

@@ -17,7 +17,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.7.0</Version>
+    <Version>1.9.0</Version>
     <Version Condition=" '$(VersionSuffix)' != '' ">$(Version)-$(VersionSuffix)</Version>
     <Product>Blazor.ContextMenu</Product>
   </PropertyGroup>

BlazorContextMenu/Components/ContextMenu.razor

@@ -1,7 +1,7 @@
 @inherits ContextMenuBase
 @namespace BlazorContextMenu
 
-<div @attributes="@Attributes" class="@($"{BaseClass} {ClassCalc} {DisplayClassCalc}")" id="@Id" style="@($"left:{X}px;top:{Y}px;")" data-autohide="@AutoHide.ToString().ToLower()">
+<div @attributes="@Attributes" class="@($"{BaseClass} {ClassCalc} {DisplayClassCalc}")" id="@Id" style="@($"left:{X}px;top:{Y}px;z-index:{ZIndex};")" data-autohide="@AutoHide.ToString().ToLower()">
     @if (IsShowing)
     {
         <ul class="@ListClassCalc">
@@ -23,4 +23,4 @@
 @code{
     [Parameter]
     public RenderFragment<MenuRenderingContext> ChildContent { get; set; }
-}
+}

BlazorContextMenu/Components/ContextMenuBase.cs

@@ -108,6 +108,12 @@ public abstract class ContextMenuBase : MenuTreeComponent
         [Parameter]
         public bool AutoHide { get; set; } = true;
 
+        /// <summary>
+        /// Set CSS z-index for overlapping other html elements. Default: 1000
+        /// </summary>
+        [Parameter]
+        public int ZIndex { get; set; } = 1000;
+
         [CascadingParameter(Name = "CascadingAnimation")]
         protected Animation? CascadingAnimation { get; set; }
 

BlazorContextMenu/Components/ContextMenuTrigger.cs

@@ -33,17 +33,17 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
 
             if (MouseButtonTrigger == MouseButtonTrigger.Left || MouseButtonTrigger == MouseButtonTrigger.Both)
             {
-                builder.AddAttribute(2, "onclick", $"blazorContextMenu.OnContextMenu(event, '{MenuId.Replace("'", "\\'")}');");
+                builder.AddAttribute(2, "onclick", $"blazorContextMenu.OnContextMenu(event, '{MenuId.Replace("'", "\\'")}', {StopPropagation.ToString().ToLower()});");
             }
 
             if (MouseButtonTrigger == MouseButtonTrigger.Right || MouseButtonTrigger == MouseButtonTrigger.Both)
             {
-                builder.AddAttribute(3, "oncontextmenu", $"blazorContextMenu.OnContextMenu(event, '{MenuId.Replace("'", "\\'")}');");
+                builder.AddAttribute(3, "oncontextmenu", $"blazorContextMenu.OnContextMenu(event, '{MenuId.Replace("'", "\\'")}', {StopPropagation.ToString().ToLower()});");
             }
 
             if (MouseButtonTrigger == MouseButtonTrigger.DoubleClick)
             {
-                builder.AddAttribute(4, "ondblclick", $"blazorContextMenu.OnContextMenu(event, '{MenuId.Replace("'", "\\'")}');");
+                builder.AddAttribute(4, "ondblclick", $"blazorContextMenu.OnContextMenu(event, '{MenuId.Replace("'", "\\'")}', {StopPropagation.ToString().ToLower()});");
             }
 
             if (!string.IsNullOrWhiteSpace(CssClass))
@@ -103,6 +103,12 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         [Parameter]
         public object Data { get; set; }
 
+        /// <summary>
+        /// Set to false if you do not want the click event to stop propagating. Default: true
+        /// </summary>
+        [Parameter]
+        public bool StopPropagation { get; set; } = true;
+
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 

BlazorContextMenu/wwwroot/blazorContextMenu.js

@@ -111,15 +111,17 @@ var blazorContextMenu = function (blazorContextMenu) {
         showMenuCommon(menu, menuId, x, y, null, null);
     }
 
-    blazorContextMenu.OnContextMenu = function (e, menuId) {
+    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);
         var triggerDotnetRef = JSON.parse(e.currentTarget.dataset["dotnetref"]);
         showMenuCommon(menu, menuId, e.x, e.y, e.target, triggerDotnetRef);
         e.preventDefault();
-        e.stopPropagation();
+        if (stopPropagation) {
+            e.stopPropagation();
+        }
         return false;
     };
 
@@ -157,7 +159,17 @@ var blazorContextMenu = function (blazorContextMenu) {
             }
         });
 
-        
+        window.addEventListener('resize', function () {
+            if (openMenus.length > 0) {
+                for (var i = 0; i < openMenus.length; i++) {
+                    var currentMenu = openMenus[i];
+                    var menuElement = document.getElementById(currentMenu.id);
+                    if (menuElement && menuElement.dataset["autohide"] == "true") {
+                        blazorContextMenu.Hide(currentMenu.id);
+                    }
+                }
+            }
+        }, true);
     };
 
 

README.md

@@ -239,7 +239,18 @@ public class Startup
 </details>
 
 ## Release Notes
-<details open="open"><summary>1.7</summary>
+<details open="open"><summary>1.9</summary>
+
+>- Added `ZIndex` support in `ContextMenu` component (default `1000`). Contributed by [grishat](https://github.com/grishat).
+>- Added autohide support in `ContextMenu` when window is resizing. Contributed by [grishat](https://github.com/grishat).
+</details>
+
+<details><summary>1.8</summary>
+
+>- Added `StopPropagation` parameter on `ContextMenuTrigger` (default `true`).
+</details>
+
+<details><summary>1.7</summary>
 
 >- Fix for [#81](https://github.com/stavroskasidis/BlazorContextMenu/issues/81).
 </details>