From e6ac43b13273074ca7931f92db05424888dda515 Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Mon, 9 Sep 2024 23:02:50 +0200 Subject: [PATCH] fix(MessagesList): prevent scroll position changes based on messages height when user is scrolling down. Signed-off-by: DorraJaouad --- src/components/MessagesList/MessagesList.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue index 09237eab2b6..e9cbb9d00d1 100644 --- a/src/components/MessagesList/MessagesList.vue +++ b/src/components/MessagesList/MessagesList.vue @@ -173,6 +173,8 @@ export default { dateSeparatorLabels: {}, endScrollTimeout: () => {}, + + isScrollingToBottom: false, } }, @@ -939,6 +941,10 @@ export default { endScroll() { this.isScrolling = false + // set timeout to avoid flickering + setTimeout(() => { + this.isScrollingToBottom = false + }, 500) clearTimeout(this.endScrollTimeout) }, @@ -1103,6 +1109,7 @@ export default { let newTop if (options?.force) { newTop = this.$refs.scroller.scrollHeight + this.isScrollingToBottom = true this.setChatScrolledToBottom(true) } else if (!this.isSticky) { // Reading old messages @@ -1273,6 +1280,11 @@ export default { }, onMessageHeightChanged({ heightDiff }) { + if (this.isScrollingToBottom || heightDiff <= 0) { + // Don't scroll while the user is scrolling + // or if the height difference is negative (e.g. when a message is deleted) + return + } // scroll down by the height difference this.$refs.scroller.scrollTop += heightDiff },