From aa2270e4c37cfe45e6f5845ded81b9e76eeb05fd Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 8 Jun 2023 19:35:08 +0200
Subject: [PATCH] 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.
---
.../discourse/components/chat-message.js | 13 +++++++++++++
.../assets/stylesheets/mobile/chat-message.scss | 8 ++++++++
.../spec/system/reply_to_message/mobile_spec.rb | 7 +++----
3 files changed, 24 insertions(+), 4 deletions(-)
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
index 38da96a3a88..c4d60ecbbbc 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js
+++ b/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();
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message.scss b/plugins/chat/assets/stylesheets/mobile/chat-message.scss
index f744b6451d9..4c2af11e28a 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-message.scss
+++ b/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,
diff --git a/plugins/chat/spec/system/reply_to_message/mobile_spec.rb b/plugins/chat/spec/system/reply_to_message/mobile_spec.rb
index f7506f29613..bc79c145022 100644
--- a/plugins/chat/spec/system/reply_to_message/mobile_spec.rb
+++ b/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.click_send_message
+ thread_page.send_message("reply to 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