fix: Move message list scroll when the last message is edited (#674)

* remove the duplicated functions: handleMessageHeightChange, and handleMessageListHeightChange AND combine them into one function: moveScroll * add optional params to the moveScroll for moving the scroll only when the last message is reached the bottom * move scroll only when the last message's updatedAt is changed --------- Co-authored-by: Ahyoung Ryu <irene.ryu@sendbird.com>
sendbird · Jul 6, 2023 · cf3c084 · cf3c084
1 parent a379d6d
commit cf3c084
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 22 deletions.
diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx
@@ -33,8 +33,7 @@ type MessageUIProps = {
   hasSeparator?: boolean;
   chainTop?: boolean;
   chainBottom?: boolean;
-  handleScroll?: () => void;
-  handleMessageListHeightChange?: () => void;
+  handleScroll?: (isBottomMessageAffected?: boolean) => void;
   // for extending
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
@@ -49,7 +48,6 @@ const Message = ({
   chainTop,
   chainBottom,
   handleScroll,
-  handleMessageListHeightChange,
   renderCustomSeparator,
   renderEditInput,
   renderMessage,
@@ -136,16 +134,20 @@ const Message = ({
     }));
   }, [mentionedUserIds]);
 
+  useLayoutEffect(() => {
+    // Keep the scrollBottom value after fetching new message list
+    handleScroll?.();
+  }, []);
   /**
    * Move the messsage list scroll
    * when the message's height is changed by `showEdit` OR `message.reactions`
    */
   useDidMountEffect(() => {
     handleScroll?.();
   }, [showEdit, message?.reactions?.length]);
-  useLayoutEffect(() => {
-    handleMessageListHeightChange?.();
-  }, []);
+  useDidMountEffect(() => {
+    handleScroll?.(true);
+  }, [message?.updatedAt]);
 
   useLayoutEffect(() => {
     let animationTimeout = null;

diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx
@@ -120,29 +120,21 @@ const MessageList: React.FC<MessageListProps> = ({
   };
 
   /**
-   * Move the messsage list scroll
-   * when each message's height is changed by `reactions` OR `showEdit`
+   * 1. Move the messsage list scroll
+   *    when each message's height is changed by `reactions` OR `showEdit`
+   * 2. Keep the scrollBottom value after fetching new message list
    */
-  const handleMessageHeightChange = () => {
+  const moveScroll = (isBottomMessageAffected = false): void => {
     const current = scrollRef?.current;
     if (current) {
       const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-      if (scrollBottom < bottom) {
+      if (scrollBottom < bottom
+        && (!isBottomMessageAffected || scrollBottom < SCROLL_BUFFER)) {
         // Move the scroll as much as the height of the message has changed
         current.scrollTop += bottom - scrollBottom;
       }
     }
   };
-  // Keep the scrollBottom value after fetching new message list
-  const handleMessageListHeightChange = () => {
-    const current = scrollRef?.current;
-    if (current) {
-      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-      if (scrollBottom < bottom) {
-        current.scrollTop += bottom - scrollBottom;
-      }
-    }
-  };
 
   const handleOnScroll = useHandleOnScrollCallback({
     hasMore: hasMorePrev,
@@ -193,8 +185,7 @@ const MessageList: React.FC<MessageListProps> = ({
             return (
               <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
                 <Message
-                  handleScroll={handleMessageHeightChange}
-                  handleMessageListHeightChange={handleMessageListHeightChange}
+                  handleScroll={moveScroll}
                   renderMessage={renderMessage}
                   message={m}
                   hasSeparator={hasSeparator}