Merge pull request #6855 from nextcloud/backport/6775/stable23

[stable23] 5615: fixed message menu error in scrolling

1 files changed, 23 insertions, 3 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 5e00ecd51..0ae0b1be2 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -34,7 +34,7 @@ the main body of the message as well as a quote.
 		:data-previous-message-id="previousMessageId"
 		class="message">
 		<div
-			:class="{'hover': showActions && !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
+			:class="{'normal-message-body': !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
 			class="message-body"
 			@mouseover="handleMouseover"
 			@mouseleave="handleMouseleave">
@@ -133,7 +133,9 @@ the main body of the message as well as a quote.
 						<Actions
 							:force-menu="true"
 							:container="container"
-							:boundaries-element="containerElement">
+							:boundaries-element="containerElement"
+							@open="handleActionMenuUpdate('open')"
+							@close="handleActionMenuUpdate('close')">
 							<ActionButton
 								v-if="isPrivateReplyable"
 								icon="icon-user"
@@ -418,6 +420,7 @@ export default {
 			seen: false,
 			// Shows/hides the message forwarder component
 			showForwarder: false,
+			isActionMenuOpen: false,
 		}
 	},
 
@@ -776,7 +779,17 @@ export default {
 		},
 
 		handleMouseleave() {
-			this.showActions = false
+			if (!this.isActionMenuOpen) {
+				this.showActions = false
+			}
+		},
+		handleActionMenuUpdate(type) {
+			if (type === 'open') {
+				this.isActionMenuOpen = true
+			} else if (type === 'close') {
+				this.isActionMenuOpen = false
+				this.showActions = false
+			}
 		},
 		async handlePrivateReply() {
 			// open the 1:1 conversation
@@ -814,6 +827,13 @@ export default {
 @import '../../../../assets/variables';
 @import '../../../../assets/buttons';
 
+.normal-message-body {
+	&:hover {
+		border-radius: 8px;
+		background-color: var(--color-background-hover);
+	}
+}
+
 .message-body {
 	padding: 4px;
 	font-size: $chat-font-size;