github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 03:09:00 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: prevents long press to hijack reaction event (#22021)

Browse Source 
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.
This commit is contained in:
Joffrey JAFFEUX 2023-06-09 00:39:34 +02:00 committed by GitHub
parent 3817e08b0f
commit 17e81018a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.hbs
View File

@ -1,8 +1,8 @@
{{#if (and @reaction this.emojiUrl)}} {{#if (and @reaction this.emojiUrl)}}
<button <button
type="button" type="button"
{{on "touchstart" this.handleTouchStart}} {{on "click" this.handleClick bubbles=false}}
{{on "click" this.handleClick}} {{on "touchstart" this.handleClick bubbles=false}}
tabindex="0" tabindex="0"
class={{concat-class class={{concat-class
"chat-message-reaction" "chat-message-reaction"

6
plugins/chat/assets/javascripts/discourse/components/chat-message-reaction.js
View File

@ -45,15 +45,9 @@ export default class ChatMessageReaction extends Component {
return emojiUrlFor(this.args.reaction.emoji); return emojiUrlFor(this.args.reaction.emoji);
} }
@action
handleTouchStart(event) {
this.handleClick(event);
}
@action @action
handleClick(event) { handleClick(event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault();
this.args.onReaction?.( this.args.onReaction?.(
this.args.reaction.emoji, this.args.reaction.emoji,

26
plugins/chat/assets/javascripts/discourse/modifiers/chat/on-long-press.js
View File

@ -35,7 +35,6 @@ export default class ChatOnLongPress extends Modifier {
element.addEventListener("touchstart", this.handleTouchStart, { element.addEventListener("touchstart", this.handleTouchStart, {
passive: true, passive: true,
capture: true,
}); });
} }
@ -43,15 +42,9 @@ export default class ChatOnLongPress extends Modifier {
onCancel() { onCancel() {
cancel(this.timeout); cancel(this.timeout);
this.element.removeEventListener("touchmove", this.onCancel, { this.element.removeEventListener("touchmove", this.onCancel);
capture: true, this.element.removeEventListener("touchend", this.onCancel);
}); this.element.removeEventListener("touchcancel", this.onCancel);
this.element.removeEventListener("touchend", this.onCancel, {
capture: true,
});
this.element.removeEventListener("touchcancel", this.onCancel, {
capture: true,
});
this.onLongPressCancel(this.element); this.onLongPressCancel(this.element);
} }
@ -65,15 +58,9 @@ export default class ChatOnLongPress extends Modifier {
this.onLongPressStart(this.element, event); this.onLongPressStart(this.element, event);
this.element.addEventListener("touchmove", this.onCancel, { this.element.addEventListener("touchmove", this.onCancel);
capture: true, this.element.addEventListener("touchend", this.onCancel);
}); this.element.addEventListener("touchcancel", this.onCancel);
this.element.addEventListener("touchend", this.onCancel, {
capture: true,
});
this.element.addEventListener("touchcancel", this.onCancel, {
capture: true,
});
this.timeout = discourseLater(() => { this.timeout = discourseLater(() => {
if (this.isDestroying || this.isDestroyed) { if (this.isDestroying || this.isDestroyed) {
@ -82,7 +69,6 @@ export default class ChatOnLongPress extends Modifier {
this.element.addEventListener("touchend", cancelEvent, { this.element.addEventListener("touchend", cancelEvent, {
once: true, once: true,
capture: true,
}); });
this.onLongPressEnd(this.element, event); this.onLongPressEnd(this.element, event);