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

Signed-off-by: Maksim Sukharev <[email protected]>

[skip ci]

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -27,9 +27,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,
@@ -318,7 +318,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,

src/components/MessagesList/MessagesList.vue

@@ -1110,7 +1110,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
@@ -1121,7 +1121,7 @@ export default {
 
 			if (element.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')