FIX: disables pointer events while showing menu (#22009)

This commit attempts to have a bullet proof solution to the following case:

- long press on message (finger is still pressed)
- menu appears
- a button is now at finger location
- user releases finger
- a click is triggered on the button

Classic event canceling solution won't work here for performance reasons as we need the event to be passive in a scroll list.

plugins/chat/assets/javascripts/discourse/components/chat-message.js

@@ -125,6 +125,7 @@ export default class ChatMessage extends Component {
   @action
   teardownChatMessage() {
     cancel(this._invitationSentTimer);
+    cancel(this._disableMessageActionsHandler);
     this.#teardownMentionedUsers();
   }
 
@@ -264,6 +265,17 @@ export default class ChatMessage extends Component {
   @action
   onLongPressCancel(element) {
     element.classList.remove("is-long-pressed");
+
+    // this a tricky bit of code which is needed to prevent the long press
+    // from triggering a click on the message actions panel when releasing finger press
+    // we can't prevent default as we need to keep the event passive for performance reasons
+    // this class will prevent any click from being triggered until removed
+    // this number has been chosen from testing but might need to be increased
+    this._disableMessageActionsHandler = discourseLater(() => {
+      document.documentElement.classList.remove(
+        "disable-message-actions-touch"
+      );
+    }, 200);
   }
 
   @action
@@ -275,6 +287,7 @@ export default class ChatMessage extends Component {
       return;
     }
 
+    document.documentElement.classList.add("disable-message-actions-touch");
     document.activeElement.blur();
     document.querySelector(".chat-composer__input")?.blur();
 

plugins/chat/assets/stylesheets/mobile/chat-message.scss

@@ -1,4 +1,12 @@
 .mobile-view.has-full-page-chat {
+  &.disable-message-actions-touch {
+    .chat-message-actions-backdrop {
+      > * {
+        pointer-events: none;
+      }
+    }
+  }
+
   #skip-link,
   .d-header,
   .chat-message-actions-mobile-outlet,

plugins/chat/spec/system/reply_to_message/mobile_spec.rb

@@ -40,14 +40,13 @@ RSpec.describe "Reply to message - channel - mobile", type: :system, mobile: tru
       it "correctly loads the thread" do
         chat_page.visit_channel(channel_1)
         channel_page.reply_to(original_message)
-        thread_page.fill_composer("reply to message")
+        thread_page.send_message("reply to message")
-        thread_page.click_send_message
 
-        expect(thread_page).to have_message(text: "reply to message")
+        expect(thread_page.messages).to have_message(text: "reply to message")
 
         refresh
 
-        expect(thread_page).to have_message(text: "reply to message")
+        expect(thread_page.messages).to have_message(text: "reply to message")
       end
     end
   end