fix: do not listen to highlight event, togle CSS class instead

Signed-off-by: Maksim Sukharev <[email protected]>
nextcloud · Nov 8, 2024 · ebe9173 · ebe9173
1 parent c4c1905
commit ebe9173
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -11,9 +11,9 @@
 		:data-next-message-id="nextMessageId"
 		:data-previous-message-id="previousMessageId"
 		class="message"
-		:class="{'message--highlighted': isHighlighted, 'message--hovered': showMessageButtonsBar}"
+		:class="{'message--hovered': showMessageButtonsBar}"
 		tabindex="0"
-		@animationend="isHighlighted = false"
+		@animationend="clearHighlightedClass"
 		@mouseover="handleMouseover"
 		@mouseleave="handleMouseleave">
 		<div :class="{'normal-message-body': !isSystemMessage && !isDeletedMessage,
@@ -191,7 +191,6 @@ export default {
 		return {
 			isHovered: false,
 			isDeleting: false,
-			isHighlighted: false,
 			// whether the message was seen, only used if this was marked as last read message
 			seen: false,
 			isActionMenuOpen: false,
@@ -344,14 +343,6 @@ export default {
 		},
 	},
 
-	mounted() {
-		EventBus.on('highlight-message', this.highlightMessage)
-	},
-
-	beforeDestroy() {
-		EventBus.off('highlight-message', this.highlightMessage)
-	},
-
 	methods: {
 		t,
 		lastReadMessageVisibilityChanged([{ isIntersecting }]) {
@@ -360,10 +351,8 @@ export default {
 			}
 		},
 
-		highlightMessage(messageId) {
-			if (this.message.id === messageId) {
-				this.isHighlighted = true
-			}
+		clearHighlightedClass() {
+			this.$refs.message.classList.remove('message--highlighted')
 		},
 
 		handleMouseover() {

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -1136,7 +1136,7 @@ export default {
 		 * @return {boolean} true if element was found, false otherwise
 		 */
 		focusMessage(messageId, smooth = true, highlightAnimation = true) {
-			let element = document.getElementById(`message_${messageId}`)
+			const element = document.getElementById(`message_${messageId}`)
 			if (!element) {
 				// Message id doesn't exist
 				// TODO: in some cases might need to trigger a scroll up if this is an older message
@@ -1145,17 +1145,18 @@ export default {
 				return false // element not found
 			}
 
-			if (this.isChatVisible && element.offsetParent === null) {
+			let scrollElement = element
+			if (this.isChatVisible && scrollElement.offsetParent === null) {
 				console.debug('Message to focus is hidden, scrolling to its nearest visible parent', messageId)
-				element = element.closest('ul[style="display: none;"]').parentElement
+				scrollElement = scrollElement.closest('ul[style="display: none;"]').parentElement
 			}
 
 			console.debug('Scrolling to a focused message programmatically')
 			this.isFocusingMessage = true
 
 			// TODO: doesn't work if chat is hidden. Need to store
 			// delayed 'shouldScroll' and call after chat is visible
-			element.scrollIntoView({
+			scrollElement.scrollIntoView({
 				behavior: smooth ? 'smooth' : 'auto',
 				block: 'center',
 				inline: 'nearest',
@@ -1171,8 +1172,9 @@ export default {
 				this.setChatScrolledToBottom(true)
 			}
 
-			if (highlightAnimation) {
-				EventBus.emit('highlight-message', messageId)
+			if (highlightAnimation && scrollElement === element) {
+				// element is visible, highlight it
+				element.classList.add('message--highlighted')
 			}
 			this.isFocusingMessage = false