From ad941c434cbeee1aa339319863e539b05fa3beb2 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Thu, 22 Jun 2023 10:59:13 +0900 Subject: [PATCH 1/2] fix: move scroll everytime when message height changes --- src/modules/Channel/components/Message/index.tsx | 9 +++++---- src/modules/Channel/components/MessageList/index.tsx | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx index 5d8de0e4b..0e8040d4b 100644 --- a/src/modules/Channel/components/Message/index.tsx +++ b/src/modules/Channel/components/Message/index.tsx @@ -136,11 +136,12 @@ const Message = ({ })); }, [mentionedUserIds]); - // Move the messsage list scroll when the last message's height is changed by reactions + /** + * Move the messsage list scroll + * when the message's height is changed by `showEdit` OR `message.reactions` + */ useDidMountEffect(() => { - if (currentGroupChannel?.lastMessage?.messageId === message?.messageId) { - handleScroll?.(); - } + handleScroll?.(); }, [showEdit, message?.reactions?.length]); useLayoutEffect(() => { handleMessageListHeightChange?.(); diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx index eeddc8679..6061153d4 100644 --- a/src/modules/Channel/components/MessageList/index.tsx +++ b/src/modules/Channel/components/MessageList/index.tsx @@ -124,7 +124,7 @@ const MessageList: React.FC = ({ const current = scrollRef?.current; if (current) { const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight; - if (scrollBottom < bottom && scrollBottom <= SCROLL_BUFFER) { + if (scrollBottom < bottom) { current.scrollTop += bottom - scrollBottom; } } From 42bb06497f4f972c5f72280d0509d0a662bcfca8 Mon Sep 17 00:00:00 2001 From: HoonBaek Date: Fri, 23 Jun 2023 12:06:05 +0900 Subject: [PATCH 2/2] chore: Add comment for handleMessageHeightChange --- src/modules/Channel/components/MessageList/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx index 6061153d4..ab8bf594d 100644 --- a/src/modules/Channel/components/MessageList/index.tsx +++ b/src/modules/Channel/components/MessageList/index.tsx @@ -119,12 +119,16 @@ const MessageList: React.FC = ({ } }; - // Move the messsage list scroll when the last message's height is changed by reactions + /** + * Move the messsage list scroll + * when each message's height is changed by `reactions` OR `showEdit` + */ const handleMessageHeightChange = () => { const current = scrollRef?.current; if (current) { const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight; if (scrollBottom < bottom) { + // Move the scroll as much as the height of the message has changed current.scrollTop += bottom - scrollBottom; } }