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..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 && scrollBottom <= SCROLL_BUFFER) { + if (scrollBottom < bottom) { + // Move the scroll as much as the height of the message has changed current.scrollTop += bottom - scrollBottom; } }