✨ Added long-press to open the posts list context menu on touch devices

9larsons · 9larsons · commit f609874a6f9d · 2026-06-15T10:53:30.000-05:00
no ref

- the posts list context menu (Duplicate, Feature, Delete, etc.) only opened via a right-click, which touch devices can't produce, so mobile users had no way to duplicate a post
- a long-press now opens the same menu through the existing dropdown path; it's the natural touch equivalent of a right-click and there's no row text-selection it conflicts with
- distinguishes a press from a scroll via a movement threshold, guards against the duplicate native contextmenu some touch platforms also emit, and suppresses the click that would otherwise navigate into the post
- suppresses the iOS link-callout / selection magnifier on rows, scoped to touch devices
diff --git a/ghost/admin/app/components/multi-list/item.hbs b/ghost/admin/app/components/multi-list/item.hbs
@@ -1,3 +1,3 @@
-<div role="menuitem" {{on "click" this.onClick capture=true}} {{on "mousedown" this.onMouseDown capture=true}} data-selected={{this.isSelected}} {{on "contextmenu" this.onContextMenu}} ...attributes>
+<div role="menuitem" {{on "click" this.onClick capture=true}} {{on "mousedown" this.onMouseDown capture=true}} data-selected={{this.isSelected}} {{on "contextmenu" this.onContextMenu}} {{on "touchstart" this.onTouchStart passive=true}} {{on "touchmove" this.onTouchMove passive=true}} {{on "touchend" this.onTouchEnd passive=true}} {{on "touchcancel" this.onTouchEnd passive=true}} ...attributes>
     {{yield}}
 </div>
diff --git a/ghost/admin/app/components/multi-list/item.js b/ghost/admin/app/components/multi-list/item.js
@@ -2,6 +2,11 @@ import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
 
+// A touch long-press is the mobile equivalent of a right-click for opening the
+// 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;
+
 function clearTextSelection() {
     if (window.getSelection) {
         if (window.getSelection().empty) {
@@ -15,6 +20,11 @@ function clearTextSelection() {
 export default class ItemComponent extends Component {
     @service dropdown;
 
+    longPressTimer = null;
+    longPressFired = false;
+    touchStartX = 0;
+    touchStartY = 0;
+
     get selectionList() {
         return this.args.model;
     }
@@ -27,6 +37,29 @@ export default class ItemComponent extends Component {
         return this.selectionList.isSelected(this.id);
     }
 
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.cancelLongPress();
+    }
+
+    cancelLongPress() {
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = null;
+        }
+    }
+
+    openContextMenu(x, y) {
+        if (this.isSelected) {
+            this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList: this.selectionList});
+        } else {
+            this.selectionList.clearSelection();
+            this.selectionList.toggleItem(this.id);
+            this.selectionList.clearOnNextUnfreeze();
+            this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList: this.selectionList});
+        }
+    }
+
     /**
      * We use the mouse down event because it allows us to cancel any text selection using preventDefault
      */
@@ -64,6 +97,15 @@ export default class ItemComponent extends Component {
 
     @action
     onClick(event) {
+        // A long-press opens the context menu while the finger is still down; swallow
+        // the click that fires on release so the row doesn't also navigate
+        if (this.longPressFired) {
+            this.longPressFired = false;
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
         if (!this.selectionList.enabled) {
             return;
         }
@@ -96,19 +138,71 @@ export default class ItemComponent extends Component {
             return;
         }
 
-        let x = event.clientX;
-        let y = event.clientY;
-
-        if (this.isSelected) {
-            this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList: this.selectionList});
-        } else {
-            this.selectionList.clearSelection();
-            this.selectionList.toggleItem(this.id);
-            this.selectionList.clearOnNextUnfreeze();
-            this.dropdown.toggleDropdown('context-menu', this, {left: x, top: y, selectionList: this.selectionList});
+        // Some touch platforms (e.g. Android) emit a native contextmenu on long-press in
+        // addition to our timer. If the long-press already opened the menu, just swallow
+        // this event so we don't toggle it straight back closed.
+        if (this.longPressFired) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
         }
+        this.cancelLongPress();
+
+        this.openContextMenu(event.clientX, event.clientY);
 
         event.preventDefault();
         event.stopPropagation();
     }
+
+    @action
+    onTouchStart(event) {
+        if (!this.selectionList.enabled) {
+            return;
+        }
+
+        if (event.target.closest('[data-ignore-select]')) {
+            return;
+        }
+
+        this.cancelLongPress();
+        this.longPressFired = false;
+
+        if (event.touches.length !== 1) {
+            return;
+        }
+
+        const touch = event.touches[0];
+        this.touchStartX = touch.clientX;
+        this.touchStartY = touch.clientY;
+
+        this.longPressTimer = setTimeout(() => {
+            this.longPressTimer = null;
+            this.longPressFired = true;
+            this.openContextMenu(this.touchStartX, this.touchStartY);
+        }, LONG_PRESS_DURATION_MS);
+    }
+
+    @action
+    onTouchMove(event) {
+        if (!this.longPressTimer) {
+            return;
+        }
+
+        const touch = event.touches[0];
+        if (!touch) {
+            return;
+        }
+
+        // A press that drifts past the threshold is a scroll, not a long-press
+        const dx = Math.abs(touch.clientX - this.touchStartX);
+        const dy = Math.abs(touch.clientY - this.touchStartY);
+        if (dx > LONG_PRESS_MOVE_THRESHOLD_PX || dy > LONG_PRESS_MOVE_THRESHOLD_PX) {
+            this.cancelLongPress();
+        }
+    }
+
+    @action
+    onTouchEnd() {
+        this.cancelLongPress();
+    }
 }
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
@@ -249,6 +249,15 @@
     border-color: transparent;
 }
 
+/* On touch devices a long-press opens the context menu, so suppress the native
+   link-callout and text-selection magnifier that would otherwise fire on the row */
+@media (hover: none) and (pointer: coarse) {
+    .gh-posts-list-item-group {
+        -webkit-touch-callout: none;
+        user-select: none;
+    }
+}
+
 .posts-list[data-ctrl] .gh-posts-list-item-group:hover::before {
     opacity: 0.05;
     background: #6E78E5;
diff --git a/ghost/admin/tests/acceptance/content-test.js b/ghost/admin/tests/acceptance/content-test.js
@@ -3,7 +3,7 @@ import sinon from 'sinon';
 import windowProxy from 'ghost-admin/utils/window-proxy';
 import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
 import {beforeEach, describe, it} from 'mocha';
-import {blur, click, currentURL, fillIn, find, findAll, triggerEvent, triggerKeyEvent, visit} from '@ember/test-helpers';
+import {blur, click, currentURL, fillIn, find, findAll, settled, triggerEvent, triggerKeyEvent, visit} from '@ember/test-helpers';
 import {clickTrigger, selectChoose, selectSearch} from 'ember-power-select/test-support/helpers';
 import {expect} from 'chai';
 import {setupApplicationTest} from 'ember-mocha';
@@ -397,6 +397,57 @@ describe('Acceptance: Posts / Pages', function () {
                         expect(lastRequest.url, 'request url').to.match(new RegExp(`/posts/${publishedPost.id}/copy/`));
                     });
 
+                    it('opens the context menu via long-press on touch devices', async function () {
+                        await visit('/posts');
+
+                        const post = find(`[data-test-post-id="${publishedPost.id}"]`);
+                        expect(post, 'post').to.exist;
+
+                        // touch devices have no contextmenu gesture, so a long-press opens the menu
+                        await triggerEvent(post, 'touchstart', {touches: [{clientX: 10, clientY: 10}]});
+
+                        // wait for the long-press timer to fire, then let the menu render
+                        await new Promise((resolve) => {
+                            setTimeout(resolve, 700);
+                        });
+                        await settled();
+
+                        const contextMenu = find('.gh-posts-context-menu');
+                        expect(contextMenu, 'context menu').to.exist;
+
+                        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');
+
+                        const post = find(`[data-test-post-id="${publishedPost.id}"]`);
+                        expect(post, 'post').to.exist;
+
+                        await triggerEvent(post, 'touchstart', {touches: [{clientX: 10, clientY: 10}]});
+                        // a press that drifts past the threshold is a scroll and cancels the long-press
+                        await triggerEvent(post, 'touchmove', {touches: [{clientX: 10, clientY: 60}]});
+
+                        await new Promise((resolve) => {
+                            setTimeout(resolve, 700);
+                        });
+                        await settled();
+
+                        // the menu markup is always present; open-state lives on the container,
+                        // and the Duplicate action only renders once a row is selected
+                        expect(find('.gh-context-menu-container').getAttribute('data-open'), 'context menu open state').to.not.equal('true');
+                        expect(find('[data-test-post-context-menu] [data-test-button="duplicate"]'), 'duplicate button').to.not.exist;
+                    });
+
                     it('can copy a post link', async function () {
                         sinon.stub(navigator.clipboard, 'writeText').resolves();
 
