Handle oncontext event

v2/internal/runtime/js/core/main.js

@@ -14,7 +14,7 @@ import * as Window from './window';
 import * as Dialog from './dialog';
 import { On, Once, OnMultiple, Emit, Notify } from './events';
 import { Callback, SystemCall } from './calls';
-import { AddScript, InjectCSS, DisableContextMenu } from './utils';
+import { AddScript, InjectCSS, DisableDefaultContextMenu } from './utils';
 import { AddIPCListener } from 'ipc';
 import * as Platform from 'platform';
 import * as Store from './store';
@@ -41,7 +41,7 @@ export function Init() {
 			Notify,
 			AddScript,
 			InjectCSS,
-			DisableContextMenu,
+			DisableDefaultContextMenu,
 			// Init,
 			AddIPCListener,
 			SystemCall,

v2/internal/runtime/js/core/utils.js

@@ -37,8 +37,6 @@ export function InjectCSS(css) {
 	}
 }
 
-export function DisableContextMenu() {
-	AddScript('function contextMenu(event) { event.preventDefault(); }');
-	var body = document.getElementsByTagName('body')[0];
-	body.setAttribute('oncontextmenu', 'contextMenu(event)');
+export function DisableDefaultContextMenu() {
+	window.disableWailsDefaultContextMenu = true;
 }

v2/internal/runtime/js/desktop/darwin.js

@@ -30,7 +30,7 @@ export function Init() {
     // Setup drag handler
     // Based on code from: https://github.com/patr0nus/DeskGap
     window.addEventListener('mousedown', function (e) {
-        var currentElement = e.target;
+        let currentElement = e.target;
         while (currentElement != null) {
             if (currentElement.hasAttribute('data-wails-no-drag')) {
                 break;
@@ -41,4 +41,28 @@ export function Init() {
             currentElement = currentElement.parentElement;
         }
     });
+
+    // Setup context menu hook
+    window.addEventListener('contextmenu', function (e) {
+        let currentElement = e.target;
+        let contextMenuId;
+        while (currentElement != null) {
+            contextMenuId = currentElement.dataset['wails-context-menu-id'];
+            if (contextMenuId != null) {
+                break;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        if (contextMenuId != null || window.disableWailsDefaultContextMenu) {
+            e.preventDefault();
+        }
+        if( contextMenuId != null ) {
+            let message = {
+                id: contextMenuId,
+                x: e.clientX,
+                y: e.clientY,
+            };
+            window.webkit.messageHandlers.contextMenu.postMessage(JSON.stringify(message));
+        }
+    });
 }