fix: add preventDefault to optionally leave plugin menu open (#589)

- fixes #582 - the original issue only mentioned the HeaderMenu plugin but I went ahead and applied the same logic (and tested them all) on the following plugins - HeaderMenu - GridMenu - ContextMenu - CellMenu
6pac · Mar 21, 2021 · c7dfe45 · c7dfe45
1 parent 3f6e7d7
commit c7dfe45
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 28 deletions.
diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
@@ -503,12 +503,6 @@
         return;
       }
 
-      // does the user want to leave open the Grid Menu after executing a command?
-      var leaveOpen = (_options.gridMenu && _options.gridMenu.leaveOpen) ? true : false;
-      if (!leaveOpen) {
-        hideMenu(e);
-      }
-
       if (command != null && command != '') {
         var callbackArgs = {
           "grid": _grid,
@@ -525,6 +519,12 @@
         }
       }
 
+      // does the user want to leave open the Grid Menu after executing a command?
+      var leaveOpen = (_options.gridMenu && _options.gridMenu.leaveOpen) ? true : false;
+      if (!leaveOpen && !e.isDefaultPrevented()) {
+        hideMenu(e);
+      }
+
       // Stop propagation so that it doesn't register as a header click event.
       e.preventDefault();
       e.stopPropagation();

diff --git a/examples/example-grid-menu.html b/examples/example-grid-menu.html
@@ -56,12 +56,12 @@
       display: block;
       cursor: pointer;
     }
-    
-    #myGrid input[type=checkbox], 
+
+    #myGrid input[type=checkbox],
     .slick-gridmenu-list input[type=checkbox],
-    .slick-columnpicker-list input[type=checkbox] { 
+    .slick-columnpicker-list input[type=checkbox] {
       display:none; /* to hide the checkbox itself */
-    } 
+    }
     #myGrid input[type=checkbox] + label:before,
     .slick-gridmenu-list input[type=checkbox] + label:before,
     .slick-columnpicker-list input[type=checkbox] + label:before {
@@ -76,14 +76,14 @@
     }
     #myGrid input[type=checkbox] + label:before,
     .slick-gridmenu-list input[type=checkbox] + label:before,
-    .slick-columnpicker-list input[type=checkbox] + label:before { 
+    .slick-columnpicker-list input[type=checkbox] + label:before {
       opacity: 0.2; /* unchecked icon */
-    } 
+    }
     #myGrid input[type=checkbox]:checked + label:before,
     .slick-gridmenu-list input[type=checkbox]:checked + label:before,
-    .slick-columnpicker-list input[type=checkbox]:checked + label:before { 
+    .slick-columnpicker-list input[type=checkbox]:checked + label:before {
       opacity: 1; /* checked icon */
-    } 
+    }
   </style>
 </head>
 <body>
@@ -320,7 +320,10 @@ <h2>View Source:</h2>
     dataView.endUpdate();
 
     // subscribe to Grid Menu event(s)
+
     gridMenuControl.onCommand.subscribe(function(e, args) {
+      // e.preventDefault(); // you could do if you wish to keep the menu open
+
       if(args.command === "toggle-filter") {
         grid.setHeaderRowVisibility(!grid.getOptions().showHeaderRow);
       }
@@ -339,7 +342,6 @@ <h2>View Source:</h2>
     });
 
     // subscribe to some events
-
     gridMenuControl.onBeforeMenuShow.subscribe(function(e, args) {
       console.log('Before the Grid Menu is shown');
     });

diff --git a/examples/example-plugin-contextmenu.html b/examples/example-plugin-contextmenu.html
@@ -202,7 +202,7 @@ <h2>View Source:</h2>
     }
 
     // Copy text to clipboard, on IE it's easy to copy a text, we can just call the clipboard
-    // but on other browsers this is insecure and we need to use the following trick to copy a cell, 
+    // but on other browsers this is insecure and we need to use the following trick to copy a cell,
     // by creating a temp div and change the text value, we can then call the execCommand to copy which only works with dom element
     function copyCellValue(textToCopy) {
       try {
@@ -481,11 +481,13 @@ <h2>View Source:</h2>
 
       // subscribe to Context Menu onCommand event (or use the action callback on each command)
       contextMenuPlugin.onCommand.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
         executeCommand(e, args);
       });
 
       // subscribe to Context Menu onOptionSelected event (or use the action callback on each option)
       contextMenuPlugin.onOptionSelected.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
         var dataContext = args && args.dataContext;
 
         // change Priority
@@ -518,11 +520,13 @@ <h2>View Source:</h2>
 
       // subscribe to Cell Menu onCommand event (or use the action callback on each command)
       cellMenuPlugin.onCommand.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
         executeCommand(e, args);
       });
 
       // subscribe to Cell Menu onOptionSelected event (or use the action callback on each option)
       cellMenuPlugin.onOptionSelected.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
         var dataContext = args && args.dataContext;
 
         // change Effort Driven column

diff --git a/examples/example-plugin-headermenu.html b/examples/example-plugin-headermenu.html
@@ -265,6 +265,8 @@ <h2>View Source:</h2>
       });
 
       headerMenuPlugin.onCommand.subscribe(function (e, args) {
+        // e.preventDefault(); // you could do if you wish to keep the menu open
+
         if (args.command === "hide") {
           // hide column
           visibleColumns = removeColumnById(visibleColumns, args.column.id);

diff --git a/plugins/slick.cellmenu.js b/plugins/slick.cellmenu.js
@@ -226,7 +226,7 @@
       if (!_cellMenuProperties.hideOptionSection && optionItems.length > 0) {
         var $optionMenu = $('<div class="slick-cell-menu-option-list" />');
         if (!_cellMenuProperties.hideCloseButton) {
-          $(closeButtonHtml).on("click", destroyMenu).appendTo(menu);
+          $(closeButtonHtml).on("click", handleCloseButtonClicked).appendTo(menu);
         }
         $optionMenu.appendTo(menu);
         populateOptionItems(
@@ -241,7 +241,7 @@
       if (!_cellMenuProperties.hideCommandSection && commandItems.length > 0) {
         var $commandMenu = $('<div class="slick-cell-menu-command-list" />');
         if (!_cellMenuProperties.hideCloseButton && (optionItems.length === 0 || _cellMenuProperties.hideOptionSection)) {
-          $(closeButtonHtml).on("click", destroyMenu).appendTo(menu);
+          $(closeButtonHtml).on("click", handleCloseButtonClicked).appendTo(menu);
         }
         $commandMenu.appendTo(menu);
         populateCommandItems(
@@ -285,6 +285,12 @@
       return 0;
     }
 
+    function handleCloseButtonClicked(e) {
+      if(!e.isDefaultPrevented()) {
+        destroyMenu(e);
+      }
+    }
+
     function destroyMenu(e, args) {
       $menu = $menu || $(".slick-cell-menu." + _gridUid);
 
@@ -399,7 +405,9 @@
 
     function handleBodyMouseDown(e) {
       if ($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) {
-        closeMenu(e, { cell: _currentCell, row: _currentRow });
+        if(!e.isDefaultPrevented()) {
+          closeMenu(e, { cell: _currentCell, row: _currentRow });
+        }
       }
     }
 
@@ -595,8 +603,6 @@
       var dataContext = _grid.getDataItem(row);
 
       if (command !== null && command !== "") {
-        closeMenu(e, { cell: cell, row: row });
-
         // user could execute a callback through 2 ways
         // via the onCommand event and/or an action callback
         var callbackArgs = {
@@ -614,6 +620,10 @@
         if (typeof item.action === "function") {
           item.action.call(this, e, callbackArgs);
         }
+
+        if(!e.isDefaultPrevented()) {
+          closeMenu(e, { cell: cell, row: row });
+        }
       }
     }
 
@@ -635,8 +645,6 @@
       var dataContext = _grid.getDataItem(row);
 
       if (option !== undefined) {
-        closeMenu(e, { cell: cell, row: row });
-
         // user could execute a callback through 2 ways
         // via the onOptionSelected event and/or an action callback
         var callbackArgs = {
@@ -654,6 +662,10 @@
         if (typeof item.action === "function") {
           item.action.call(this, e, callbackArgs);
         }
+
+        if(!e.isDefaultPrevented()) {
+          closeMenu(e, { cell: cell, row: row });
+        }
       }
     }
 

diff --git a/plugins/slick.contextmenu.js b/plugins/slick.contextmenu.js
@@ -245,7 +245,7 @@
       if (!_contextMenuProperties.hideOptionSection && isColumnOptionAllowed && optionItems.length > 0) {
         var $optionMenu = $('<div class="slick-context-menu-option-list" />');
         if (!_contextMenuProperties.hideCloseButton) {
-          $(closeButtonHtml).on("click", destroyMenu).appendTo(menu);
+          $(closeButtonHtml).on("click", handleCloseButtonClicked).appendTo(menu);
         }
         $optionMenu.appendTo(menu);
         populateOptionItems(
@@ -260,7 +260,7 @@
       if (!_contextMenuProperties.hideCommandSection && isColumnCommandAllowed && commandItems.length > 0) {
         var $commandMenu = $('<div class="slick-context-menu-command-list" />');
         if (!_contextMenuProperties.hideCloseButton && (!isColumnOptionAllowed || optionItems.length === 0 || _contextMenuProperties.hideOptionSection)) {
-          $(closeButtonHtml).on("click", destroyMenu).appendTo(menu);
+          $(closeButtonHtml).on("click", handleCloseButtonClicked).appendTo(menu);
         }
         $commandMenu.appendTo(menu);
         populateCommandItems(
@@ -285,6 +285,12 @@
       return menu;
     }
 
+    function handleCloseButtonClicked(e) {
+      if(!e.isDefaultPrevented()) {
+        destroyMenu(e);
+      }
+    }
+
     function destroyMenu(e, args) {
       $menu = $menu || $(".slick-context-menu." + _gridUid);
 
@@ -372,7 +378,9 @@
       }
 
       $("body").one("click", function (e) {
-        destroyMenu(e, { cell: _currentCell, row: _currentRow });
+        if(!e.isDefaultPrevented()) {
+          destroyMenu(e, { cell: _currentCell, row: _currentRow });
+        }
       });
     }
 

diff --git a/plugins/slick.headermenu.js b/plugins/slick.headermenu.js
@@ -336,8 +336,6 @@
         return;
       }
 
-      hideMenu();
-
       if (command != null && command !== '') {
         var callbackArgs = {
           "grid": _grid,
@@ -353,6 +351,10 @@
         }
       }
 
+      if(!e.isDefaultPrevented()) {
+        hideMenu();
+      }
+
       // Stop propagation so that it doesn't register as a header click event.
       e.preventDefault();
       e.stopPropagation();