fix: scrollBehavior should not affect all scroll behaviors (#1003)

Currently, scrollBehavior is being applied to the entire scroll area.
This can result in an undesirable user experience when loading messages
or updating message heights, leading to a bad UX where the message
scroll jumps from end to end.

We have revised it to avoid setting scrollBehavior to the entire scroll
area and improved it by explicitly specifying the animated value for
parts that should not be smooth.

Browser: Safari
AS-IS **[00:00 ~ 00:10]** 
TO-BE **[00:36 ~ 00:53]** 

<video
src="https://github.com/sendbird/sendbird-uikit-react/assets/26326015/3a3f4d68-a376-444e-b40d-cc9b947a8016"
/>


from: https://sendbird.slack.com/archives/C0585965FFA/p1709753211213979

Author: bang9

src/modules/GroupChannel/components/Message/MessageView.tsx

@@ -90,6 +90,7 @@ export interface MessageViewProps extends MessageProps {
   setHighLightedMessageId?: React.Dispatch<React.SetStateAction<number>>;
   /** @deprecated * */
   onMessageHighlighted?: () => void;
+  usedInLegacy?: boolean;
 }
 
 // TODO: Refactor this component, is too complex now
@@ -138,6 +139,7 @@ const MessageView = (props: MessageViewProps) => {
     setAnimatedMessageId,
     animatedMessageId,
     onMessageAnimated,
+    usedInLegacy = true,
   } = props;
 
   const { dateLocale, stringSet } = useLocalization();
@@ -192,8 +194,8 @@ const MessageView = (props: MessageViewProps) => {
   }, [message?.updatedAt, (message as UserMessage)?.message]);
 
   useLayoutEffect(() => {
-    // Keep the scrollBottom value after fetching new message list
-    handleScroll?.(true);
+    // Keep the scrollBottom value after fetching new message list (but GroupChannel module is not needed.)
+    if (usedInLegacy) handleScroll?.(true);
   }, []);
 
   useLayoutEffect(() => {

src/modules/GroupChannel/components/Message/index.tsx

@@ -81,6 +81,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       onMessageAnimated={onMessageAnimated}
       renderFileViewer={(props) => <FileViewer {...props} />}
       renderRemoveMessageModal={(props) => <RemoveMessageModal {...props} />}
+      usedInLegacy={false}
     />
   );
 };

src/modules/GroupChannel/components/MessageList/hooks/__test__/useScrollBehavior.spec.ts

@@ -15,7 +15,6 @@ import FrozenNotification from '../FrozenNotification';
 import { SCROLL_BUFFER } from '../../../../utils/consts';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
-import { useScrollBehavior } from './hooks/useScrollBehavior';
 import TypingIndicatorBubble from '../../../../ui/TypingIndicatorBubble';
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { getComponentKeyFromMessage } from '../../context/utils';
@@ -82,7 +81,6 @@ export const MessageList = ({
 
   const [unreadSinceDate, setUnreadSinceDate] = useState<Date>();
 
-  useScrollBehavior();
   useEffect(() => {
     if (isScrollBottomReached) {
       setUnreadSinceDate(undefined);
@@ -104,7 +102,7 @@ export const MessageList = ({
       if (latestDistance < currentDistance && (!isBottomMessageAffected || latestDistance < SCROLL_BUFFER)) {
         const diff = currentDistance - latestDistance;
         // Move the scroll as much as the height of the message has changed
-        scrollPubSub.publish('scroll', { top: elem.scrollTop + diff, lazy: false });
+        scrollPubSub.publish('scroll', { top: elem.scrollTop + diff, lazy: false, animated: false });
       }
     }
   };
@@ -121,7 +119,7 @@ export const MessageList = ({
           className="sendbird-conversation__messages__notification"
           count={newMessages.length}
           lastReadAt={unreadSinceDate}
-          onClick={scrollToBottom}
+          onClick={() => scrollToBottom()}
         />
       );
     },
@@ -131,8 +129,8 @@ export const MessageList = ({
       return (
         <div
           className="sendbird-conversation__scroll-bottom-button"
-          onClick={scrollToBottom}
-          onKeyDown={scrollToBottom}
+          onClick={() => scrollToBottom()}
+          onKeyDown={() => scrollToBottom()}
           tabIndex={0}
           role="button"
         >

src/modules/GroupChannel/components/MessageList/hooks/useScrollBehavior.ts

@@ -91,7 +91,7 @@ export interface GroupChannelContextType extends ContextBaseType, MessageListDat
   isScrollBottomReached: boolean;
   setIsScrollBottomReached: React.Dispatch<React.SetStateAction<boolean>>;
 
-  scrollToBottom: () => void;
+  scrollToBottom: (animated?: boolean) => void;
   scrollToMessage: (createdAt: number, messageId: number) => void;
   toggleReaction(message: SendableMessageType, emojiKey: string, isReacted: boolean): void;
 }
@@ -145,7 +145,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const [fetchChannelError, setFetchChannelError] = useState<SendbirdError>(null);
 
   // Ref
-  const { scrollRef, scrollPubSub, scrollDistanceFromBottomRef, isScrollBottomReached, setIsScrollBottomReached } = useMessageListScroll();
+  const { scrollRef, scrollPubSub, scrollDistanceFromBottomRef, isScrollBottomReached, setIsScrollBottomReached } = useMessageListScroll(scrollBehavior);
   const messageInputRef = useRef(null);
 
   const toggleReaction = useToggleReactionCallback(currentChannel, config.logger);
@@ -179,7 +179,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     },
     onMessagesReceived: () => {
       if (isScrollBottomReached && isContextMenuClosed()) {
-        scrollPubSub.publish('scrollToBottom', null);
+        scrollPubSub.publish('scrollToBottom', {});
       }
     },
     onChannelDeleted: () => {
@@ -211,7 +211,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
 
           if (viewUpdated) {
             const bottomOffset = prevViewInfo.scrollHeight - prevViewInfo.scrollTop;
-            scrollPubSub.publish('scroll', { top: nextViewInfo.scrollHeight - bottomOffset, lazy: false });
+            scrollPubSub.publish('scroll', { top: nextViewInfo.scrollHeight - bottomOffset, lazy: false, animated: false });
           }
         });
       });
@@ -232,7 +232,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
           const viewUpdated = prevViewInfo.scrollHeight < nextViewInfo.scrollHeight;
 
           if (viewUpdated) {
-            scrollPubSub.publish('scroll', { top: prevViewInfo.scrollTop, lazy: false });
+            scrollPubSub.publish('scroll', { top: prevViewInfo.scrollTop, lazy: false, animated: false });
           }
         });
       });
@@ -273,22 +273,22 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       preventDuplicateRequest.lock();
       await preventDuplicateRequest.run(() => {
         return new Promise<void>((resolve) => {
-          scrollPubSub.publish('scrollToBottom', resolve);
+          scrollPubSub.publish('scrollToBottom', { resolve, animated: false });
         });
       });
       preventDuplicateRequest.release();
     }
 
     const onSentMessageFromOtherModule = (data: PubSubSendMessagePayload) => {
-      if (data.channel.url === channelUrl) scrollPubSub.publish('scrollToBottom', null);
+      if (data.channel.url === channelUrl) scrollPubSub.publish('scrollToBottom', {});
     };
     const subscribes = [
       config.pubSub.subscribe(PUBSUB_TOPICS.SEND_USER_MESSAGE, onSentMessageFromOtherModule),
       config.pubSub.subscribe(PUBSUB_TOPICS.SEND_FILE_MESSAGE, onSentMessageFromOtherModule),
     ];
     return () => {
       subscribes.forEach((subscribe) => subscribe.remove());
-      scrollPubSub.publish('scrollToBottom', null);
+      scrollPubSub.publish('scrollToBottom', { animated: false });
     };
   }, [messageDataSource.initialized, channelUrl]);
 
@@ -297,7 +297,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     if (typeof startingPoint === 'number') {
       // We do not handle animation for message search here.
       // Please update the animatedMessageId prop to trigger the animation.
-      scrollToMessage(startingPoint, 0, false);
+      scrollToMessage(startingPoint, 0, false, false);
     }
   }, [startingPoint]);
 
@@ -306,17 +306,17 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     if (_animatedMessageId) setAnimatedMessageId(_animatedMessageId);
   }, [_animatedMessageId]);
 
-  const scrollToBottom = usePreservedCallback(async () => {
+  const scrollToBottom = usePreservedCallback(async (animated?: boolean) => {
     if (!scrollRef.current) return;
 
     setAnimatedMessageId(null);
     setIsScrollBottomReached(true);
 
     if (config.isOnline && messageDataSource.hasNext()) {
       await messageDataSource.resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
-      scrollPubSub.publish('scrollToBottom', null);
+      scrollPubSub.publish('scrollToBottom', { animated });
     } else {
-      scrollPubSub.publish('scrollToBottom', null);
+      scrollPubSub.publish('scrollToBottom', { animated });
     }
 
     if (currentChannel && !messageDataSource.hasNext()) {
@@ -325,43 +325,45 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     }
   });
 
-  const scrollToMessage = usePreservedCallback(async (createdAt: number, messageId: number, animated = true) => {
-    // NOTE: To prevent multiple clicks on the message in the channel while scrolling
-    //  Check if it can be replaced with event.stopPropagation()
-    const element = scrollRef.current;
-    const parentNode = element?.parentNode as HTMLDivElement;
-    const clickHandler = {
-      activate() {
-        if (!element || !parentNode) return;
-        element.style.pointerEvents = 'auto';
-        parentNode.style.cursor = 'auto';
-      },
-      deactivate() {
-        if (!element || !parentNode) return;
-        element.style.pointerEvents = 'none';
-        parentNode.style.cursor = 'wait';
-      },
-    };
-
-    clickHandler.deactivate();
-
-    setAnimatedMessageId(null);
-    const message = messageDataSource.messages.find((it) => it.messageId === messageId || it.createdAt === createdAt);
-    if (message) {
-      const topOffset = getMessageTopOffset(message.createdAt);
-      if (topOffset) scrollPubSub.publish('scroll', { top: topOffset });
-      if (animated) setAnimatedMessageId(messageId);
-    } else {
-      await messageDataSource.resetWithStartingPoint(createdAt);
-      setTimeout(() => {
-        const topOffset = getMessageTopOffset(createdAt);
-        if (topOffset) scrollPubSub.publish('scroll', { top: topOffset, lazy: false });
-        if (animated) setAnimatedMessageId(messageId);
-      });
-    }
+  const scrollToMessage = usePreservedCallback(
+    async (createdAt: number, messageId: number, messageFocusAnimated?: boolean, scrollAnimated?: boolean) => {
+      // NOTE: To prevent multiple clicks on the message in the channel while scrolling
+      //  Check if it can be replaced with event.stopPropagation()
+      const element = scrollRef.current;
+      const parentNode = element?.parentNode as HTMLDivElement;
+      const clickHandler = {
+        activate() {
+          if (!element || !parentNode) return;
+          element.style.pointerEvents = 'auto';
+          parentNode.style.cursor = 'auto';
+        },
+        deactivate() {
+          if (!element || !parentNode) return;
+          element.style.pointerEvents = 'none';
+          parentNode.style.cursor = 'wait';
+        },
+      };
+
+      clickHandler.deactivate();
+
+      setAnimatedMessageId(null);
+      const message = messageDataSource.messages.find((it) => it.messageId === messageId || it.createdAt === createdAt);
+      if (message) {
+        const topOffset = getMessageTopOffset(message.createdAt);
+        if (topOffset) scrollPubSub.publish('scroll', { top: topOffset, animated: scrollAnimated });
+        if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
+      } else {
+        await messageDataSource.resetWithStartingPoint(createdAt);
+        setTimeout(() => {
+          const topOffset = getMessageTopOffset(createdAt);
+          if (topOffset) scrollPubSub.publish('scroll', { top: topOffset, lazy: false, animated: scrollAnimated });
+          if (messageFocusAnimated ?? true) setAnimatedMessageId(messageId);
+        });
+      }
 
-    clickHandler.activate();
-  });
+      clickHandler.activate();
+    },
+  );
 
   const messageActions = useMessageActions({ ...props, ...messageDataSource, scrollToBottom, quoteMessage, replyType });
 

src/modules/GroupChannel/components/MessageList/index.tsx

@@ -33,7 +33,7 @@ type MessageActions = {
 };
 
 interface Params extends GroupChannelProviderProps, MessageListDataSource {
-  scrollToBottom(): Promise<void>;
+  scrollToBottom(animated?: boolean): Promise<void>;
   quoteMessage?: SendableMessageType;
   replyType: ReplyType;
 }

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -10,7 +10,10 @@ export type ScrollTopics = 'scrollToBottom' | 'scroll';
 export type ScrollTopicUnion =
   | {
       topic: 'scrollToBottom';
-      payload: undefined | null | PromiseResolver;
+      payload: {
+        animated?: boolean;
+        resolve?: PromiseResolver;
+      };
     }
   | {
       topic: 'scroll';
@@ -32,7 +35,12 @@ function runCallback(callback: () => void, lazy = true) {
   }
 }
 
-export function useMessageListScroll() {
+function getScrollBehavior(behavior: 'smooth' | 'auto', animated?: boolean) {
+  if (typeof animated === 'boolean') return animated ? 'smooth' : 'auto';
+  return behavior;
+}
+
+export function useMessageListScroll(behavior: 'smooth' | 'auto') {
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollDistanceFromBottomRef = useRef(0);
 
@@ -43,11 +51,15 @@ export function useMessageListScroll() {
     const unsubscribes: { remove(): void }[] = [];
 
     unsubscribes.push(
-      scrollPubSub.subscribe('scrollToBottom', (resolve) => {
+      scrollPubSub.subscribe('scrollToBottom', ({ resolve, animated }) => {
         runCallback(() => {
           if (!scrollRef.current) return;
 
-          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+          if (scrollRef.current.scroll) {
+            scrollRef.current.scroll({ top: scrollRef.current.scrollHeight, behavior: getScrollBehavior(behavior, animated) });
+          } else {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+          }
 
           // Update data by manual update
           scrollDistanceFromBottomRef.current = 0;
@@ -59,12 +71,16 @@ export function useMessageListScroll() {
     );
 
     unsubscribes.push(
-      scrollPubSub.subscribe('scroll', ({ top, animated = false, lazy, resolve }) => {
+      scrollPubSub.subscribe('scroll', ({ top, animated, lazy, resolve }) => {
         runCallback(() => {
           if (!scrollRef.current) return;
           const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
 
-          scrollRef.current.scroll({ top, behavior: animated ? 'smooth' : 'auto' });
+          if (scrollRef.current.scroll) {
+            scrollRef.current.scroll({ top, behavior: getScrollBehavior(behavior, animated) });
+          } else {
+            scrollRef.current.scrollTop = top;
+          }
 
           // Update data by manual update
           scrollDistanceFromBottomRef.current = Math.max(0, scrollHeight - scrollTop - clientHeight);
@@ -78,7 +94,7 @@ export function useMessageListScroll() {
     return () => {
       unsubscribes.forEach(({ remove }) => remove());
     };
-  }, []);
+  }, [behavior]);
 
   // Update data by scroll events
   useOnScrollPositionChangeDetectorWithRef(scrollRef, {