fix: Move scroll of message list without scrollIntoView (#460)

Issue
* If customer had setup OpenChannel on a Page that has scroll, it used
to scroll the whole page, unintentionally
* The function `scrollIntoView` has affected the outside element.
So it triggers weird scroll behavior that we didn't expect of the parent
elements.

Fix
* Move message list scroll using element.scrollTop instead of the
function scrollIntoView in the OpenChannelMessageList

[UIKIT-3420](https://sendbird.atlassian.net/browse/UIKIT-3420)

Author: HoonBaek

src/smart-components/Channel/components/MessageList/index.tsx

@@ -11,7 +11,7 @@ import { isAboutSame } from '../../context/utils';
 import { getMessagePartsInfo } from './getMessagePartsInfo';
 import UnreadCount from '../UnreadCount';
 import FrozenNotification from '../FrozenNotification';
-import { MESSAGE_SCROLL_BUFFER } from '../../context/const';
+import { SCROLL_BUFFER } from '../../../../utils/consts';
 
 export interface MessageListProps {
   className?: string;
@@ -77,7 +77,7 @@ const MessageList: React.FC<MessageListProps> = ({
       });
     }
 
-    if (isAboutSame(clientHeight + scrollTop, scrollHeight, MESSAGE_SCROLL_BUFFER)) {
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
       onScrollDownCallback(([messages]) => {
         if (messages) {
           try {
@@ -96,7 +96,7 @@ const MessageList: React.FC<MessageListProps> = ({
       setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight)
     }
 
-    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, MESSAGE_SCROLL_BUFFER)) {
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
       // Mark as read if scroll is at end
       setTimeout(() => {
         messagesDispatcher({
@@ -125,7 +125,7 @@ const MessageList: React.FC<MessageListProps> = ({
     const current = scrollRef?.current;
     if (current) {
       const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-      if (scrollBottom < bottom && scrollBottom <= MESSAGE_SCROLL_BUFFER) {
+      if (scrollBottom < bottom && scrollBottom <= SCROLL_BUFFER) {
         current.scrollTop += bottom - scrollBottom;
       }
     }

src/smart-components/Channel/context/const.ts

@@ -1,5 +1,3 @@
-export const MESSAGE_SCROLL_BUFFER = 10;
-
 export const PREV_RESULT_SIZE = 30;
 export const NEXT_RESULT_SIZE = 15;
 

src/smart-components/OpenChannel/components/OpenChannelMessageList/index.tsx

@@ -1,6 +1,7 @@
 import './openchannel-message-list.scss';
 
 import React, { ReactElement, useRef, useState, useMemo } from 'react';
+import { FileMessage, UserMessage } from '@sendbird/chat/message';
 import isSameDay from 'date-fns/isSameDay';
 
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
@@ -10,7 +11,7 @@ import { compareMessagesForGrouping } from '../../context/utils';
 import { useOpenChannelContext } from '../../context/OpenChannelProvider';
 import OpenChannelMessage from '../OpenChannelMessage';
 import { RenderMessageProps } from '../../../../types';
-import { FileMessage, UserMessage } from '@sendbird/chat/message';
+import { useHandleOnScrollCallback } from './useHandleOnScrollCallback';
 
 export type OpenchannelMessageListProps = {
   renderMessage?: (props: RenderMessageProps) => React.ElementType<RenderMessageProps>;
@@ -30,40 +31,20 @@ function OpenchannelMessageList(
   const scrollRef = ref || useRef(null);
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);
 
-  const handleOnScroll = (e) => {
-    const element = e.target;
-    const {
-      scrollTop,
-      scrollHeight,
-      clientHeight,
-    } = element;
-    if (scrollHeight > scrollTop + clientHeight + 1) {
-      setShowScrollDownButton(true);
-    } else {
-      setShowScrollDownButton(false);
-    }
-
-    if (!hasMore) {
-      return;
-    }
-    if (scrollTop === 0) {
-      const nodes = scrollRef.current.querySelectorAll('.sendbird-msg--scroll-ref');
-      const first = nodes && nodes[0];
-      onScroll(() => {
-        try {
-          first.scrollIntoView();
-        } catch (error) { }
-      });
-    }
-  };
-
   const scrollToBottom = () => {
     if (scrollRef && scrollRef.current) {
       scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight);
       setShowScrollDownButton(false);
     }
   };
 
+  const handleOnScroll = useHandleOnScrollCallback({
+    setShowScrollDownButton,
+    hasMore,
+    onScroll,
+    scrollRef,
+  });
+
   const memoizedMessageList = useMemo(() => {
     if (allMessages.length > 0) {
       return (

src/smart-components/OpenChannel/components/OpenChannelMessageList/useHandleOnScrollCallback.ts

@@ -0,0 +1,45 @@
+import React, { useCallback } from "react";
+import { SCROLL_BUFFER } from "../../../../utils/consts";
+
+export interface UseHandleOnScrollCallbackProps {
+  setShowScrollDownButton: React.Dispatch<React.SetStateAction<boolean>>;
+  hasMore: boolean;
+  onScroll(fn: () => void): void;
+  scrollRef: React.RefObject<HTMLDivElement>;
+}
+
+export function useHandleOnScrollCallback({
+  setShowScrollDownButton,
+  hasMore,
+  onScroll,
+  scrollRef,
+}: UseHandleOnScrollCallbackProps): (e: React.UIEvent<HTMLElement>) => void {
+  return useCallback((e) => {
+    const element = e.target as Element;
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    } = element;
+    const scrollBottom = scrollHeight - scrollTop;
+    if (scrollHeight > scrollTop + clientHeight + 1) {
+      setShowScrollDownButton(true);
+    } else {
+      setShowScrollDownButton(false);
+    }
+    if (!hasMore) {
+      return;
+    }
+    if (scrollTop < SCROLL_BUFFER) {
+      onScroll(() => {
+        // Fetch more messages
+        scrollRef.current.scrollTop = scrollRef.current.scrollHeight - scrollBottom;
+      });
+    }
+  }, [
+    setShowScrollDownButton,
+    hasMore,
+    onScroll,
+    scrollRef,
+  ]);
+}

src/smart-components/OpenChannelList/components/OpenChannelListUI/index.tsx

@@ -13,6 +13,7 @@ import { useOpenChannelListContext } from '../../context/OpenChannelListProvider
 import OpenChannelListActionTypes from '../../context/dux/actionTypes';
 import CreateOpenChannel from '../../../CreateOpenChannel';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import { SCROLL_BUFFER } from '../../../../utils/consts';
 
 interface RenderOpenChannelPreviewProps {
   channel: OpenChannel;
@@ -57,7 +58,7 @@ function OpenChannelListUI({
       scrollHeight,
     } = element;
     const isAboutSame = (a, b, px) => (Math.abs(a - b) <= px);
-    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)) {
       fetchNextChannels((messages) => {
         if (messages) {
           try {

src/utils/consts.ts

@@ -1,3 +1,5 @@
+export const SCROLL_BUFFER = 10;
+
 // voice message record
 export const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;
 export const VOICE_RECORDER_DEFAULT_MIN = 1000;