Improved long-press ghost-click suppression to spare real menu taps

no ref

- the click suppressor armed after a long-press cancelled the next click anywhere within 500ms; if the browser never emitted the synthetic release click, a fast real tap on a menu action could be discarded (review feedback)
- scope it to clicks at the touch point, where the compatibility click fires, so a real tap elsewhere always goes through even with the suppressor armed
- add a regression test that taps a menu action after touchend with no ghost click emitted; this fails on the previous eat-any-click behaviour

Author: 9larsons

ghost/admin/app/components/multi-list/item.js

@@ -6,6 +6,9 @@ import {inject as service} from '@ember/service';
 // context menu, since touch devices have no contextmenu gesture of their own.
 const LONG_PRESS_DURATION_MS = 500;
 const LONG_PRESS_MOVE_THRESHOLD_PX = 10;
+// The compatibility "ghost" click fires at the release point; only swallow clicks
+// within this radius of it so a real tap on a menu action is never discarded.
+const GHOST_CLICK_RADIUS_PX = 20;
 
 function clearTextSelection() {
     if (window.getSelection) {
@@ -57,12 +60,18 @@ export default class ItemComponent extends Component {
     // A long-press opens the menu while the finger is still down; on release the browser
     // fires a synthetic "ghost" click that the dropdown service's body-click handler reads
     // as an outside click, closing the menu instantly. Swallow that one click at the
-    // document level (capture phase, before it reaches the overlay or body).
+    // document level (capture phase, before it reaches the overlay or body) — but only when
+    // it lands at the release point, so a real tap on a menu action elsewhere is never
+    // discarded, even if the browser happens not to emit the ghost click.
     suppressGhostClick() {
         this.cancelGhostClickSuppression();
         this.ghostClickHandler = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+            const isGhostClick = Math.abs(event.clientX - this.touchStartX) <= GHOST_CLICK_RADIUS_PX
+                && Math.abs(event.clientY - this.touchStartY) <= GHOST_CLICK_RADIUS_PX;
+            if (isGhostClick) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
             this.cancelGhostClickSuppression();
         };
         document.addEventListener('click', this.ghostClickHandler, true);

ghost/admin/tests/acceptance/content-test.js

@@ -418,9 +418,9 @@ describe('Acceptance: Posts / Pages', function () {
                         await triggerEvent(find('.gh-context-menu-overlay'), 'contextmenu');
                         expect(find('.gh-posts-context-menu'), 'context menu stays visible while held').to.be.visible;
 
-                        // releasing the long-press fires a synthetic click; it must not close the menu either
+                        // releasing the long-press fires a synthetic click at the touch point; it must not close the menu
                         await triggerEvent(post, 'touchend');
-                        await triggerEvent(find('.gh-context-menu-overlay'), 'click');
+                        await triggerEvent(find('.gh-context-menu-overlay'), 'click', {clientX: 10, clientY: 10});
                         expect(find('.gh-posts-context-menu'), 'context menu stays visible after release click').to.be.visible;
 
                         const contextMenu = find('.gh-posts-context-menu');
@@ -436,6 +436,35 @@ describe('Acceptance: Posts / Pages', function () {
                         expect(lastRequest.url, 'request url').to.match(new RegExp(`/posts/${publishedPost.id}/copy/`));
                     });
 
+                    it('does not discard a real tap on a menu action after a long-press', async function () {
+                        await visit('/posts');
+
+                        const post = find(`[data-test-post-id="${publishedPost.id}"]`);
+                        expect(post, 'post').to.exist;
+
+                        await triggerEvent(post, 'touchstart', {touches: [{clientX: 10, clientY: 10}]});
+                        await new Promise((resolve) => {
+                            setTimeout(resolve, 700);
+                        });
+                        await settled();
+                        // arm the ghost-click suppressor, but emit no synthetic release click
+                        await triggerEvent(post, 'touchend');
+
+                        // a real tap on a menu action (away from the touch point) must still go through,
+                        // even though the suppressor is armed and no ghost click was consumed
+                        const contextMenu = find('.gh-posts-context-menu');
+                        const buttons = [...contextMenu.querySelectorAll('button')];
+                        const duplicate = buttons.find(button => button.innerText.trim().includes('Duplicate'));
+                        expect(duplicate, 'duplicate button').to.exist;
+
+                        await click(duplicate);
+
+                        const posts = findAll('[data-test-post-id]');
+                        expect(posts.length, 'all posts count').to.equal(5);
+                        const [lastRequest] = this.server.pretender.handledRequests.slice(-1);
+                        expect(lastRequest.url, 'request url').to.match(new RegExp(`/posts/${publishedPost.id}/copy/`));
+                    });
+
                     it('does not open the context menu when a touch becomes a scroll', async function () {
                         await visit('/posts');