From 17e81018a2dee19f4db1e597e71a91d26fe1395a Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 9 Jun 2023 00:39:34 +0200
Subject: [PATCH] FIX: prevents long press to hijack reaction event (#22021)

Removing a reaction could start a long press at the same time and put the screen in a stuck state.

This commit ensures we give an opportunity to the reaction to capture the event first and not propagate further.
---
 .../components/chat-message-reaction.hbs      |  4 +--
 .../components/chat-message-reaction.js       |  6 -----
 .../discourse/modifiers/chat/on-long-press.js | 26 +++++--------------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs
index 5c16e184fcb..fcfdbf47cec 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs
@@ -1,8 +1,8 @@
 {{#if (and @reaction this.emojiUrl)}}
   <button
     type="button"
-    {{on "touchstart" this.handleTouchStart}}
-    {{on "click" this.handleClick}}
+    {{on "click" this.handleClick bubbles=false}}
+    {{on "touchstart" this.handleClick bubbles=false}}
     tabindex="0"
     class={{concat-class
       "chat-message-reaction"
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js
index eb7ed845128..4c9ac1b17fc 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js
@@ -45,15 +45,9 @@ export default class ChatMessageReaction extends Component {
     return emojiUrlFor(this.args.reaction.emoji);
   }
 
-  @action
-  handleTouchStart(event) {
-    this.handleClick(event);
-  }
-
   @action
   handleClick(event) {
     event.stopPropagation();
-    event.preventDefault();
 
     this.args.onReaction?.(
       this.args.reaction.emoji,
diff --git a/plugins/chat/assets/javascripts/discourse/modifiers/chat/on-long-press.js b/plugins/chat/assets/javascripts/discourse/modifiers/chat/on-long-press.js
index e978b01c8b6..397e137f956 100644
--- a/plugins/chat/assets/javascripts/discourse/modifiers/chat/on-long-press.js
+++ b/plugins/chat/assets/javascripts/discourse/modifiers/chat/on-long-press.js
@@ -35,7 +35,6 @@ export default class ChatOnLongPress extends Modifier {
 
     element.addEventListener("touchstart", this.handleTouchStart, {
       passive: true,
-      capture: true,
     });
   }
 
@@ -43,15 +42,9 @@ export default class ChatOnLongPress extends Modifier {
   onCancel() {
     cancel(this.timeout);
 
-    this.element.removeEventListener("touchmove", this.onCancel, {
-      capture: true,
-    });
-    this.element.removeEventListener("touchend", this.onCancel, {
-      capture: true,
-    });
-    this.element.removeEventListener("touchcancel", this.onCancel, {
-      capture: true,
-    });
+    this.element.removeEventListener("touchmove", this.onCancel);
+    this.element.removeEventListener("touchend", this.onCancel);
+    this.element.removeEventListener("touchcancel", this.onCancel);
 
     this.onLongPressCancel(this.element);
   }
@@ -65,15 +58,9 @@ export default class ChatOnLongPress extends Modifier {
 
     this.onLongPressStart(this.element, event);
 
-    this.element.addEventListener("touchmove", this.onCancel, {
-      capture: true,
-    });
-    this.element.addEventListener("touchend", this.onCancel, {
-      capture: true,
-    });
-    this.element.addEventListener("touchcancel", this.onCancel, {
-      capture: true,
-    });
+    this.element.addEventListener("touchmove", this.onCancel);
+    this.element.addEventListener("touchend", this.onCancel);
+    this.element.addEventListener("touchcancel", this.onCancel);
 
     this.timeout = discourseLater(() => {
       if (this.isDestroying || this.isDestroyed) {
@@ -82,7 +69,6 @@ export default class ChatOnLongPress extends Modifier {
 
       this.element.addEventListener("touchend", cancelEvent, {
         once: true,
-        capture: true,
       });
 
       this.onLongPressEnd(this.element, event);