Merge pull request #99 from stavroskasidis/release/1.10

Release/1.10

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.9.0</Version>
+    <Version>1.10.0</Version>
     <Version Condition=" '$(VersionSuffix)' != '' ">$(Version)-$(VersionSuffix)</Version>
     <Product>Blazor.ContextMenu</Product>
   </PropertyGroup>

BlazorContextMenu/Components/AutoHideEvent.cs

@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace BlazorContextMenu
+{
+    public enum AutoHideEvent
+    {
+        MouseDown,  //default
+        MouseUp
+    }
+}

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;z-index:{ZIndex};")" 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()" data-autohideevent="@AutoHideEvent.ToString().ToLower()">
     @if (IsShowing)
     {
         <ul class="@ListClassCalc">

BlazorContextMenu/Components/ContextMenuBase.cs

@@ -108,6 +108,12 @@ public abstract class ContextMenuBase : MenuTreeComponent
         [Parameter]
         public bool AutoHide { get; set; } = true;
 
+        /// <summary>
+        /// Set to AutoHideEvent.MouseUp if you want it to close the menu on the MouseUp event. Default: AutoHideEvent.MouseDown
+        /// </summary>
+        [Parameter]
+        public AutoHideEvent AutoHideEvent { get; set; } = AutoHideEvent.MouseDown;
+
         /// <summary>
         /// Set CSS z-index for overlapping other html elements. Default: 1000
         /// </summary>

BlazorContextMenu/wwwroot/blazorContextMenu.js

@@ -144,11 +144,19 @@ var blazorContextMenu = function (blazorContextMenu) {
 
     blazorContextMenu.Init = function () {
         document.addEventListener("mouseup", function (e) {
+            handleAutoHideEvent(e, "mouseup");
+        });
+
+        document.addEventListener("mousedown", function (e) {
+            handleAutoHideEvent(e, "mousedown");
+        });
+
+        function handleAutoHideEvent(e, autoHideEvent) {
             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") {
+                    if (menuElement && menuElement.dataset["autohide"] == "true" && menuElement.dataset["autohideevent"] == autoHideEvent) {
                         var clickedInsideMenu = menuElement.contains(e.target);
                         if (!clickedInsideMenu) {
                             blazorContextMenu.Hide(currentMenu.id);
@@ -157,7 +165,7 @@ var blazorContextMenu = function (blazorContextMenu) {
 
                 }
             }
-        });
+        }
 
         window.addEventListener('resize', function () {
             if (openMenus.length > 0) {

README.md

@@ -190,7 +190,12 @@ public class Startup
 
 ## ⚠️ Breaking changes ⚠️
 
-<details open="open"><summary>Upgrading from 0.19 to 0.20</summary>
+<details open="open"><summary>Upgrading from 1.9.0 to 1.10.0</summary>
+
+>- The default auto-hide event is now on "mousedown". If you want the old behaviour, you can use the new `AutoHideEvent` parameter on the `ContextMenu` component to change it back to "mouseup".
+</details>
+
+<details><summary>Upgrading from 0.19 to 0.20</summary>
 
 >- Replaced the `ContextMenuTriggerId` in events with the reference to the actual `ContextMenuTrigger`
 </details>
@@ -239,7 +244,12 @@ public class Startup
 </details>
 
 ## Release Notes
-<details open="open"><summary>1.9</summary>
+<details open="open"><summary>1.10</summary>
+
+>- Changed default auto hide event to "mousedown". Old behaviour ("mouseup") is available by using the `AutoHideEvent` parameter on the `ContextMenu` component. Contributed by [KristofferStrube](https://github.com/KristofferStrube).
+</details>
+
+<details><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).

TestApps/BlazorContextMenu.TestAppsCommon/CommonIndex.razor

@@ -67,6 +67,10 @@
     <p id="test12-trigger">Right-Click me (menu4 unhideable)</p>
 </ContextMenuTrigger>
 
+<ContextMenuTrigger MenuId="menu5">
+    <p id="test13-trigger">Right-Click me (menu5 hides on mouseup)</p>
+</ContextMenuTrigger>
+
 
 <ContextMenu Id="menu1" Template="dark" OnAppearing="OnAppearingMenu1">
     <Item Id="menu1-item1" OnClick="FetchDataClick">Fetch Data</Item>
@@ -113,6 +117,11 @@
     <Item Id="menu4-item2" OnClick="OnClick">Item 2</Item>
 </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>
+</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>
@@ -150,6 +159,8 @@
 
 
 <NavLink href="/TodoList">Go to Todo List</NavLink>
+<div id="app_loaded"></div>
+
 @code{
     private bool menu1Autoclose = true;
     protected async Task ShowMenuBtnOnClick()

TestApps/BlazorContextMenu.TestAppsCommon/CommonTodoList.razor

@@ -33,6 +33,7 @@
 </ContextMenu>
 
 <button id="manualShowBtn" @onclick="BtnClick">Show menu for first item</button>
+<div id="app_loaded"></div>
 
 @code{
 

TestApps/BlazorContextMenu.TestAppsCommon/wwwroot/interop.js

@@ -29,6 +29,6 @@
 
 TestApp_AppLoaded = function () {
     var appLoadedElement = document.createElement("div");
-    appLoadedElement.id = "app-loaded";
+    appLoadedElement.id = "app_loaded";
     document.body.appendChild(appLoadedElement);
 }

TestApps/BlazorTestApp/BlazorContextMenu.BlazorTestApp.Client/App.razor

@@ -11,10 +11,13 @@
 
 
 
-@inject IJSRuntime jsRuntime
+@*@inject IJSRuntime jsRuntime
 @code{
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        await jsRuntime.InvokeAsync<object>("TestApp_AppLoaded");
+        if (firstRender)
+        {
+            await jsRuntime.InvokeVoidAsync("TestApp_AppLoaded");
+        }
     }
-}
+}*@