Prevent right mouse button up event to click on menu item.

In some case[*] when we right click on row/col header and release mouse button, first element of the context menu is invoked accidentally. To prevent this, just prevent the right mouseup event on context menu item. [*] 1920x1080 resolution with %75 browser zoom Signed-off-by: Gülşah Köse <[email protected]> Change-Id: I28299e7a7cf83eaed27ef4ed6c3555fb2cc80682
CollaboraOnline · Nov 2, 2023 · 46c1248 · 46c1248
1 parent 557f191
commit 46c1248
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/browser/src/control/Control.ColumnHeader.ts b/browser/src/control/Control.ColumnHeader.ts
@@ -143,6 +143,8 @@ export class ColumnHeader extends Header {
 		this.context.strokeStyle = this._borderColor;
 		this.context.lineWidth = app.dpiScale;
 		this.context.strokeRect(startX - 0.5, 0.5, entry.size, this.size[1]);
+
+        this._map._contextMenu.stopRightMouseUpEvent();
 	}
 
 	getHeaderEntryBoundingClientRect (index: number): Partial<DOMRect> {

diff --git a/browser/src/control/Control.ContextMenu.js b/browser/src/control/Control.ContextMenu.js
@@ -296,7 +296,19 @@ L.Control.ContextMenu = L.Control.extend({
 		}
 
 		return contextMenu;
-	}
+	},
+
+    // Prevents right mouse button's mouseup event from triggering menu item accidentally.
+    stopRightMouseUpEvent: function() {
+        var menuItems = document.getElementsByClassName('context-menu-item');
+
+        for (var i = 0 ; i < menuItems.length; i++) {
+            menuItems[i].addEventListener('mouseup', function(e) {
+                if (e.button == 2) // Is a right mouse button event?
+                    e.stopPropagation();
+            });
+        }
+    }
 });
 
 L.control.contextMenu = function (options) {

diff --git a/browser/src/control/Control.RowHeader.ts b/browser/src/control/Control.RowHeader.ts
@@ -140,6 +140,8 @@ export class RowHeader extends cool.Header {
 		this.context.strokeStyle = this._borderColor;
 		this.context.lineWidth = app.dpiScale;
 		this.context.strokeRect(0.5, startY - 0.5, this.size[0], entry.size);
+
+        this._map._contextMenu.stopRightMouseUpEvent();
 	}
 
 	getHeaderEntryBoundingClientRect (index: number): Partial<DOMRect> {