From 720c0c6e4d01dff1d75fc9e6df8af0855a1dea85 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 21 Jun 2023 13:07:12 +0200
Subject: [PATCH] UX: adds small delay before making message active (#22221)

This should prevent the message to show as active on mobile when making a touch to start scrolling.

This commit also makes naming of touch lifecycle functions coherent.
---
 .../discourse/components/chat-message.hbs          |  4 ++--
 .../discourse/components/chat-message.js           | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
index c074f8e528d..105ec95af60 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.hbs
@@ -35,8 +35,8 @@
     {{on "mouseleave" this.onMouseLeave passive=true}}
     {{on "mousemove" this.onMouseMove passive=true}}
     {{chat/on-long-press
-      this.handleLongPressStart
-      this.handleLongPressEnd
+      this.onLongPressStart
+      this.onLongPressEnd
       this.onLongPressCancel
     }}
     {{chat/track-message
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
index 1fa0d20550d..0eb7b17e2f2 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
@@ -132,6 +132,7 @@ export default class ChatMessage extends Component {
   willDestroyMessage() {
     cancel(this._invitationSentTimer);
     cancel(this._disableMessageActionsHandler);
+    cancel(this._makeMessageActiveHandler);
     this.#teardownMentionedUsers();
   }
 
@@ -272,16 +273,22 @@ export default class ChatMessage extends Component {
   }
 
   @action
-  handleLongPressStart() {
+  onLongPressStart() {
     if (!this.args.message.expanded) {
       return;
     }
 
-    this.isActive = true;
+    // prevents message to show as active when starting scroll
+    // at this moment scroll has no momentum and the row can
+    // capture the touch event instead of a scroll
+    this._makeMessageActiveHandler = discourseLater(() => {
+      this.isActive = true;
+    }, 50);
   }
 
   @action
   onLongPressCancel() {
+    cancel(this._makeMessageActiveHandler);
     this.isActive = false;
 
     // this a tricky bit of code which is needed to prevent the long press
@@ -297,7 +304,8 @@ export default class ChatMessage extends Component {
   }
 
   @action
-  handleLongPressEnd() {
+  onLongPressEnd() {
+    cancel(this._makeMessageActiveHandler);
     this.isActive = false;
 
     if (isZoomed()) {