🐛 Fixed CMD/shift clicking to open the editor in a new tab/window

refs https://ghost.slack.com/archives/C025584CA/p1683105468216909

When holding cmd,ctrl or shift when clicking a post list item, it would try to select it. But that meant some user flows were broken where users would open multiple posts at the same time in a new tab.

This change allows you to cmd/ctrl/shift/right click on the edit button again.

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

@@ -35,6 +35,12 @@ export default class ItemComponent extends Component {
         if (!this.selectionList.enabled) {
             return;
         }
+
+        // If event target has data-ignore-select or one of its partens, then ignore the event
+        if (event.target.closest('[data-ignore-select]')) {
+            return;
+        }
+
         const shiftKey = event.shiftKey;
         const ctrlKey = event.ctrlKey || event.metaKey;
 
@@ -61,6 +67,12 @@ export default class ItemComponent extends Component {
         if (!this.selectionList.enabled) {
             return;
         }
+
+        // If event target has data-ignore-select or one of its partens, then ignore the event
+        if (event.target.closest('[data-ignore-select]')) {
+            return;
+        }
+
         const shiftKey = event.shiftKey;
         const ctrlKey = event.ctrlKey || event.metaKey;
 
@@ -78,6 +90,12 @@ export default class ItemComponent extends Component {
         if (!this.selectionList.enabled) {
             return;
         }
+
+        // If event target has data-ignore-select or one of its partens, then ignore the event
+        if (event.target.closest('[data-ignore-select]')) {
+            return;
+        }
+
         let x = event.clientX;
         let y = event.clientY;
 

ghost/admin/app/components/posts-list/list-item.hbs

@@ -187,20 +187,20 @@
     {{!-- Button column --}}
     {{#if @post.hasAnalyticsPage }}
         <LinkTo @route="posts.analytics" @model={{@post.id}} class="permalink gh-list-data gh-post-list-button" title="">
-            <span class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}" title="Go to Analytics">
+            <span class="gh-post-list-cta stats {{if this.isHovered "is-hovered"}}" title="Go to Analytics" data-ignore-select>
                 {{svg-jar "stats" title="Go to Analytics"}}
             </span>
         </LinkTo>
     {{else}}
         {{#if (and this.session.user.isContributor @post.isPublished)}}
             <a href={{@post.url}} class="permalink gh-list-data gh-post-list-button" target="_blank" rel="noopener noreferrer">
-                <span class="gh-post-list-cta view {{if this.isHovered "is-hovered"}}" title="View post">
+                <span class="gh-post-list-cta view {{if this.isHovered "is-hovered"}}" title="View post" data-ignore-select>
                     {{svg-jar "arrow-top-right" title="View post"}}
                 </span>
             </a>
         {{else}}
             <LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data gh-post-list-button" title="">
-                <span class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}" title="Go to Editor">
+                <span class="gh-post-list-cta edit {{if this.isHovered "is-hovered"}}" title="Go to Editor" data-ignore-select>
                     {{svg-jar "pen" title="Go to Editor"}}
                 </span>
             </LinkTo>

ghost/admin/app/styles/layouts/content.css

@@ -179,6 +179,11 @@
     pointer-events: none;
 }
 
+.posts-list[data-ctrl] .gh-posts-list-item-group * [data-ignore-select]{
+    pointer-events: all;
+    cursor: pointer !important;
+}
+
 .posts-list .gh-posts-list-item-group:hover {
     background: linear-gradient(315deg, var(--whitegrey-l2) 60%, var(--white) 100%);
 }