From 92ba3dd98a1ff37437f4d628874d71d46f600965 Mon Sep 17 00:00:00 2001
From: bjorn <bjorn@swis.nl>
Date: Wed, 29 Jul 2026 16:31:04 +0200
Subject: [PATCH 1/2] docs: make the asynchronous create demo work on right
 click

The demo opened its menu from a `mouseup` handler, which is not the event
you get when the user right clicks. Chromium keeps its own context menu
open over the page and never delivers the `mouseup`, so only the native
menu showed up. Firefox delivers it, but only after the native menu is
already on screen.

Bind `contextmenu` instead and call `preventDefault()` on it so the
browser menu stays away. The items are now handed to a callback from a
`setTimeout`, so the demo really is asynchronous rather than building the
items inline and merely deferring the open.

Because `$.fn.contextMenu()` opens the menu by triggering a `contextmenu`
event on the trigger, the handler runs again. A flag on the trigger makes
that re-entrant call a no-op, and it doubles as a guard against starting
a second request while one is still in flight.

The spec file was renamed from `aync-create.js` to `async-create.js` and
extended to cover the right click flow: the menu only appears after the
delay, the native menu is prevented, the menu also opens from a
`contextmenu` event that is never followed by a `mouseup`, the re-entrant
event settles instead of recursing, and a second right click still works.
---
 documentation/demo/async-create.md | 88 ++++++++++++++++++---------
 test/specs/async-create.js         | 98 ++++++++++++++++++++++++++++++
 test/specs/aync-create.js          | 11 ----
 3 files changed, 157 insertions(+), 40 deletions(-)
 create mode 100644 test/specs/async-create.js
 delete mode 100644 test/specs/aync-create.js

diff --git a/documentation/demo/async-create.md b/documentation/demo/async-create.md
index 3376fc15..050edde6 100644
--- a/documentation/demo/async-create.md
+++ b/documentation/demo/async-create.md
@@ -13,50 +13,80 @@ currentMenu: async-create
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+Sometimes the menu items are not known up front, for example because they have to be
+fetched from the server first. This demo registers the menu with `trigger: 'none'` and
+opens it by hand once the items have arrived. The `setTimeout` below stands in for that
+server round trip, so the menu appears about a second after you right click.
+
+Two things are worth pointing out:
+
+* The `contextmenu` event is handled directly on the trigger and `preventDefault()` is
+  called on it, otherwise the browser shows its own context menu while you are still
+  waiting for the items.
+* `$.fn.contextMenu()` opens the menu by triggering a `contextmenu` event on the element,
+  which runs the very same handler again. The `asyncMenuBusy` flag below makes that
+  re-entrant call a no-op, and it doubles as a guard against firing a second request while
+  one is still in flight.
+
 <span class="context-menu-one btn btn-neutral">right click me</span>
 
 ## Example code
 
 <script type="text/javascript" class="showcase">
 $(function(){
-    // some build handler to call asynchronously
-    function createSomeMenu() {
-        return {
-            callback: function(key, options) {
-                var m = "clicked: " + key;
-                window.console && console.log(m) || alert(m);
-            },
-            items: {
-                "edit": {name: "Edit", icon: "edit"},
-                "cut": {name: "Cut", icon: "cut"},
-                "copy": {name: "Copy", icon: "copy"}
-            }
-        };
+    // pretend this goes to the server; it hands the menu to the callback when ready
+    function fetchSomeMenu(done) {
+        setTimeout(function(){
+            done({
+                callback: function(key, options) {
+                    var m = "clicked: " + key;
+                    window.console && console.log(m) || alert(m);
+                },
+                items: {
+                    "edit": {name: "Edit", icon: "edit"},
+                    "cut": {name: "Cut", icon: "cut"},
+                    "copy": {name: "Copy", icon: "copy"}
+                }
+            });
+        }, 1000);
     }
 
-    // some asynchronous click handler
-    $('.context-menu-one').on('mouseup', function(e){
+    // handle the right click ourselves, the menu is not ready yet
+    $('.context-menu-one').on('contextmenu', function(e){
         var $this = $(this);
-        // store a callback on the trigger
-        $this.data('runCallbackThingie', createSomeMenu);
-        var _offset = $this.offset(),
-            position = {
-                x: _offset.left + 10, 
-                y: _offset.top + 10
-            }
-        // open the contextMenu asynchronously
-        setTimeout(function(){ $this.contextMenu(position); }, 1000);
+
+        // suppress the browser's own context menu
+        e.preventDefault();
+
+        // $this.contextMenu() below triggers a 'contextmenu' event on the trigger,
+        // so this handler runs again. Ignore that re-entrant call, and any right
+        // click that arrives while the items are still being fetched.
+        if ($this.data('asyncMenuBusy')) {
+            return;
+        }
+        $this.data('asyncMenuBusy', true);
+
+        var position = {x: e.pageX, y: e.pageY};
+
+        fetchSomeMenu(function(menu){
+            // store the result on the trigger so build() can pick it up
+            $this.data('asyncMenu', menu);
+
+            // open the contextMenu, this re-enters the handler above
+            $this.contextMenu(position);
+
+            // ready for the next right click
+            $this.removeData('asyncMenuBusy');
+        });
     });
 
     // setup context menu
     $.contextMenu({
         selector: '.context-menu-one',
         trigger: 'none',
-        build: function($trigger, e) {
-            e.preventDefault();
-        
-            // pull a callback from the trigger
-            return $trigger.data('runCallbackThingie')();
+        build: function($trigger) {
+            // pull the asynchronously fetched menu off the trigger
+            return $trigger.data('asyncMenu');
         }
     });
 });
diff --git a/test/specs/async-create.js b/test/specs/async-create.js
new file mode 100644
index 00000000..8945374e
--- /dev/null
+++ b/test/specs/async-create.js
@@ -0,0 +1,98 @@
+const { test, expect } = require('@playwright/test');
+const { fixture } = require('../support/helpers');
+
+// Records whether the browser's own context menu would have been shown, and how
+// often the demo's jQuery 'contextmenu' handler ran. $.fn.contextMenu() opens the
+// menu by triggering a jQuery 'contextmenu' event, which is not dispatched to
+// native listeners, so the two counters deliberately use different bindings.
+async function instrument(page) {
+  await page.evaluate(() => {
+    window.__nativePrevented = null;
+    window.__nativeEvents = 0;
+    window.__jqueryEvents = 0;
+    document.querySelector('.context-menu-one').addEventListener('contextmenu', function (e) {
+      window.__nativeEvents++;
+      window.__nativePrevented = e.defaultPrevented;
+    });
+    window.jQuery('.context-menu-one').on('contextmenu', function () {
+      window.__jqueryEvents++;
+    });
+  });
+}
+
+test.describe('Test async create', () => {
+  test('should only render the context menu once the items have been fetched', async ({ page }) => {
+    await page.goto(fixture('async-create.html'));
+
+    await page.click('.context-menu-one', { button: 'right' });
+
+    // the demo waits for a (simulated) server round trip before opening
+    await expect(page.locator('.context-menu-root')).toBeHidden();
+
+    await page.waitForSelector('#context-menu-layer');
+    await expect(page.locator('.context-menu-root')).toBeVisible();
+    await expect(page.locator('.context-menu-root li')).toHaveCount(3);
+  });
+
+  test('should suppress the browser context menu on right click', async ({ page }) => {
+    await page.goto(fixture('async-create.html'));
+    await instrument(page);
+
+    await page.click('.context-menu-one', { button: 'right' });
+    await page.waitForSelector('#context-menu-layer');
+
+    expect(await page.evaluate(() => window.__nativeEvents)).toBe(1);
+    expect(await page.evaluate(() => window.__nativePrevented)).toBe(true);
+  });
+
+  test('should open from a contextmenu event alone, without a mouseup', async ({ page }) => {
+    await page.goto(fixture('async-create.html'));
+
+    // Chromium keeps its own context menu open over the page and never delivers
+    // the mouseup, so the demo must key off contextmenu instead.
+    // See https://github.com/swisnl/jQuery-contextMenu/issues/735
+    await page.evaluate(() => {
+      const trigger = document.querySelector('.context-menu-one');
+      const rect = trigger.getBoundingClientRect();
+      trigger.dispatchEvent(new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        button: 2,
+        clientX: Math.round(rect.left + 5),
+        clientY: Math.round(rect.top + 5),
+      }));
+    });
+
+    await page.waitForSelector('#context-menu-layer');
+    await expect(page.locator('.context-menu-root li')).toHaveCount(3);
+  });
+
+  test('should guard the re-entrant contextmenu event raised by $.fn.contextMenu()', async ({ page }) => {
+    await page.goto(fixture('async-create.html'));
+    await instrument(page);
+
+    await page.click('.context-menu-one', { button: 'right' });
+    await page.waitForSelector('#context-menu-layer');
+
+    // one genuine right click plus the one raised by $.fn.contextMenu(); without
+    // the guard in the demo this would recurse instead of settling on two
+    expect(await page.evaluate(() => window.__jqueryEvents)).toBe(2);
+    await expect(page.locator('.context-menu-root')).toHaveCount(1);
+  });
+
+  test('should open again on a second right click', async ({ page }) => {
+    await page.goto(fixture('async-create.html'));
+
+    await page.click('.context-menu-one', { button: 'right' });
+    await page.waitForSelector('#context-menu-layer');
+    await expect(page.locator('.context-menu-root')).toBeVisible();
+
+    await page.keyboard.press('Escape');
+    await expect(page.locator('.context-menu-root')).toBeHidden();
+
+    await page.click('.context-menu-one', { button: 'right' });
+    await page.waitForSelector('#context-menu-layer');
+    await expect(page.locator('.context-menu-root')).toBeVisible();
+    await expect(page.locator('.context-menu-root li')).toHaveCount(3);
+  });
+});
diff --git a/test/specs/aync-create.js b/test/specs/aync-create.js
deleted file mode 100644
index e9763f02..00000000
--- a/test/specs/aync-create.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const { test, expect } = require('@playwright/test');
-const { fixture } = require('../support/helpers');
-
-test.describe('Test async create', () => {
-  test('should render async created context menu', async ({ page }) => {
-    await page.goto(fixture('async-create.html'));
-    await page.click('.context-menu-one', { button: 'right' });
-    await page.waitForSelector('#context-menu-layer');
-    await expect(page.locator('.context-menu-root li')).toHaveCount(3);
-  });
-});

From e33252ac7ec980f074526a8907d34e2b25c75179 Mon Sep 17 00:00:00 2001
From: bjorn <bjorn@swis.nl>
Date: Wed, 29 Jul 2026 16:35:10 +0200
Subject: [PATCH 2/2] test: assert the async delay from below instead of racing
 the first open

Asserting the menu is still hidden right after the right click passes on
the first poll, but it would fail on a machine slow enough to let the 1s
delay elapse first. Measure the time from the click to the menu appearing
and only bound it from below instead.
---
 test/specs/async-create.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/test/specs/async-create.js b/test/specs/async-create.js
index 8945374e..51fd5251 100644
--- a/test/specs/async-create.js
+++ b/test/specs/async-create.js
@@ -24,12 +24,15 @@ test.describe('Test async create', () => {
   test('should only render the context menu once the items have been fetched', async ({ page }) => {
     await page.goto(fixture('async-create.html'));
 
+    const start = Date.now();
     await page.click('.context-menu-one', { button: 'right' });
+    await page.waitForSelector('#context-menu-layer');
 
-    // the demo waits for a (simulated) server round trip before opening
-    await expect(page.locator('.context-menu-root')).toBeHidden();
+    // the demo waits ~1s for a (simulated) server round trip, so the menu cannot
+    // have been built synchronously off the right click. Only bounded from below,
+    // a slow machine may take longer.
+    expect(Date.now() - start).toBeGreaterThanOrEqual(500);
 
-    await page.waitForSelector('#context-menu-layer');
     await expect(page.locator('.context-menu-root')).toBeVisible();
     await expect(page.locator('.context-menu-root li')).toHaveCount(3);
   });