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