FIX: Handle auxclick event on topic list (#34408)

martin-brennan · web-flow · commit 27157d77255f · 2025-08-20T09:53:33.000+10:00
This commit adds a new `auxclick` event handler to the topic list item, which calls the same `click` handler. The `auxclick` event is triggered by auxiliary mouse buttons, such as the middle mouse button. This fixes an issue where using the middle mouse button on a topic card in Horizon anywhere but the topic title would not open the topic in a new tab. Normal topic list click functionality remains unchanged. c.f. https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event
diff --git a/app/assets/javascripts/discourse/app/components/topic-list/item.gjs b/app/assets/javascripts/discourse/app/components/topic-list/item.gjs
@@ -141,57 +141,57 @@ export default class Item extends Component {
   }
 
   @action
-  click(e) {
+  click(event) {
     applyBehaviorTransformer(
       "topic-list-item-click",
       () => {
         if (
-          e.target.classList.contains("raw-topic-link") ||
-          e.target.classList.contains("post-activity") ||
-          e.target.classList.contains("badge-posts")
+          event.target.classList.contains("raw-topic-link") ||
+          event.target.classList.contains("post-activity") ||
+          event.target.classList.contains("badge-posts")
         ) {
-          if (wantsNewWindow(e)) {
+          if (wantsNewWindow(event)) {
             return;
           }
 
-          e.preventDefault();
-          this.navigateToTopic(this.args.topic, e.target.href);
+          event.preventDefault();
+          this.navigateToTopic(this.args.topic, event.target.href);
           return;
         }
 
         // make full row click target on mobile, due to size constraints
         if (
           this.site.mobileView &&
-          e.target.matches(
+          event.target.matches(
             ".topic-list-data, .main-link, .right, .topic-item-stats, .topic-item-stats__category-tags, .discourse-tags"
           )
         ) {
-          if (wantsNewWindow(e)) {
+          if (wantsNewWindow(event)) {
             return;
           }
 
-          e.preventDefault();
+          event.preventDefault();
           this.navigateToTopic(this.args.topic, this.args.topic.lastUnreadUrl);
           return;
         }
       },
       {
+        event,
         topic: this.args.topic,
-        event: e,
         navigateToTopic: this.navigateToTopic,
       }
     );
   }
 
   @action
-  keyDown(e) {
+  keyDown(event) {
     if (
-      e.key === "Enter" &&
-      (e.target.classList.contains("post-activity") ||
-        e.target.classList.contains("badge-posts"))
+      event.key === "Enter" &&
+      (event.target.classList.contains("post-activity") ||
+        event.target.classList.contains("badge-posts"))
     ) {
-      e.preventDefault();
-      this.navigateToTopic(this.args.topic, e.target.href);
+      event.preventDefault();
+      this.navigateToTopic(this.args.topic, event.target.href);
     }
   }
 
@@ -238,6 +238,7 @@ export default class Item extends Component {
       {{this.highlightIfNeeded}}
       {{on "keydown" this.keyDown}}
       {{on "click" this.click}}
+      {{on "auxclick" this.click}}
       data-topic-id={{@topic.id}}
       role={{this.role}}
       aria-level={{this.ariaLevel}}
diff --git a/themes/horizon/javascripts/discourse/initializers/topic-list-columns.gjs b/themes/horizon/javascripts/discourse/initializers/topic-list-columns.gjs
@@ -117,6 +117,7 @@ export default {
               metaKey: event.metaKey,
               shiftKey: event.shiftKey,
               button: event.button,
+              which: event.which,
               bubbles: true,
               cancelable: true,
             })
