From e0197147f4c3df4fc70908319280866c09c1389f Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Fri, 24 Mar 2023 13:22:29 -0300 Subject: [PATCH] fix: Livechat MessageList not auto scrolling on new message (#28547) --- .../livechat/src/components/Messages/MessageList/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/livechat/src/components/Messages/MessageList/index.js b/packages/livechat/src/components/Messages/MessageList/index.js index f7ab458c017..f68e7ba4d8c 100644 --- a/packages/livechat/src/components/Messages/MessageList/index.js +++ b/packages/livechat/src/components/Messages/MessageList/index.js @@ -22,6 +22,8 @@ export class MessageList extends MemoizedComponent { static SCROLL_FREE = 'free'; + static SCROLL_AT_BOTTOM_AREA = 128; + // eslint-disable-next-line no-use-before-define scrollPosition = MessageList.SCROLL_AT_BOTTOM; @@ -33,11 +35,15 @@ export class MessageList extends MemoizedComponent { } let scrollPosition; + const scrollBottom = this.base.scrollHeight - (this.base.clientHeight + this.base.scrollTop); + if (this.base.scrollHeight <= this.base.clientHeight) { scrollPosition = MessageList.SCROLL_AT_BOTTOM; } else if (this.base.scrollTop === 0) { scrollPosition = MessageList.SCROLL_AT_TOP; - } else if (this.base.scrollHeight === this.base.scrollTop + this.base.clientHeight) { + } else if (scrollBottom <= MessageList.SCROLL_AT_BOTTOM_AREA) { + // TODO: Once we convert these classes to functional components we should use refs to check if the last message is within the viewport + // For now we are using a fixed value to check if the last message is within the bottom of the scroll area scrollPosition = MessageList.SCROLL_AT_BOTTOM; } else { scrollPosition = MessageList.SCROLL_FREE;