bug-fix: Fix scrollBottom issue in IOS 16. (#770)

chohongm · web-flow · commit ec78d4428aa2 · 2023-10-11T17:33:52.000+09:00
Fix scrollBottom issue in IOS 16. Fixes: [CLNP-1210](https://sendbird.atlassian.net/browse/CLNP-1210) [CLNP-1210]: https://sendbird.atlassian.net/browse/CLNP-1210?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/src/hooks/useHandleOnScrollCallback/index.ts b/src/hooks/useHandleOnScrollCallback/index.ts
@@ -10,6 +10,7 @@ export interface UseHandleOnScrollCallbackProps {
   onScroll(callback: () => void): void;
   scrollRef: React.RefObject<HTMLDivElement>;
   setShowScrollDownButton?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsScrolled?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export function calcScrollBottom(scrollHeight: number, scrollTop: number): number {
diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx
@@ -89,6 +89,7 @@ const Message = ({
     onMessageAnimated,
     onMessageHighlighted,
     onScrollCallback,
+    setIsScrolled,
   } = useChannelContext();
   const [showEdit, setShowEdit] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
@@ -117,6 +118,7 @@ const Message = ({
     hasMore: false,
     onScroll: onScrollCallback,
     scrollRef: messageScrollRef,
+    setIsScrolled,
   });
 
   const mentionNodes = useDirtyGetMentions({ ref: editMessageInputRef }, { logger });
diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx
@@ -55,8 +55,11 @@ const MessageList: React.FC<MessageListProps> = ({
     filterMessageList,
     replyType,
     loading,
+    isScrolled,
+    setIsScrolled,
     unreadSince,
   } = useChannelContext();
+
   const store = useSendbirdStateContext();
   const allMessagesFiltered = (typeof filterMessageList === 'function')
     ? allMessages.filter((filterMessageList as (message: EveryMessage) => boolean))
@@ -160,121 +163,131 @@ const MessageList: React.FC<MessageListProps> = ({
     }
     return <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />;
   }
+
   return (
-    <div className={`sendbird-conversation__messages ${className}`}>
-      <div className="sendbird-conversation__scroll-container">
-        <div className="sendbird-conversation__padding" />
-        <div
-          className="sendbird-conversation__messages-padding"
-          ref={scrollRef}
-          onScroll={(e) => {
-            handleOnScroll();
-            scrollToBottomHandler(e);
-          }}
-        >
-          {allMessagesFiltered.map((m, idx) => {
-            const {
-              chainTop,
-              chainBottom,
-              hasSeparator,
-            } = getMessagePartsInfo({
-              allMessages: allMessagesFiltered,
-              replyType,
-              isMessageGroupingEnabled,
-              currentIndex: idx,
-              currentMessage: m,
-              currentChannel: currentGroupChannel,
-            });
-            const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
-            return (
-              <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
-                <Message
-                  handleScroll={moveScroll}
-                  renderMessage={renderMessage}
-                  message={m}
-                  hasSeparator={hasSeparator}
-                  chainTop={chainTop}
-                  chainBottom={chainBottom}
-                  renderCustomSeparator={renderCustomSeparator}
-                />
-              </MessageProvider>
-            );
-          })}
-          {localMessages.map((m, idx) => {
-            const {
-              chainTop,
-              chainBottom,
-            } = getMessagePartsInfo({
-              allMessages: allMessagesFiltered,
-              replyType,
-              isMessageGroupingEnabled,
-              currentIndex: idx,
-              currentMessage: m,
-              currentChannel: currentGroupChannel,
-            });
-            const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
-            return (
-              <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
-                <Message
-                  handleScroll={moveScroll}
-                  renderMessage={renderMessage}
-                  message={m}
-                  chainTop={chainTop}
-                  chainBottom={chainBottom}
-                  renderCustomSeparator={renderCustomSeparator}
-                />
-              </MessageProvider>
-            );
-          })}
-          {/* show frozen notifications */}
-          {/* show new message notifications */}
-        </div>
-      </div>
-      {currentGroupChannel?.isFrozen && (
-        <FrozenNotification className="sendbird-conversation__messages__notification" />
-      )}
-      {unreadSince && (
-        <UnreadCount
-          className="sendbird-conversation__messages__notification"
-          count={currentGroupChannel?.unreadMessageCount}
-          time={unreadSince}
-          onClick={() => {
-            if (scrollRef?.current?.scrollTop) {
-              scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
-            }
-            if (!disableMarkAsRead && !!currentGroupChannel) {
-              markAsReadScheduler.push(currentGroupChannel);
-              messagesDispatcher({
-                type: messageActionTypes.MARK_AS_READ,
-                payload: { channel: currentGroupChannel },
-              });
-            }
-            setInitialTimeStamp(null);
-            setAnimatedMessageId(null);
-            setHighLightedMessageId(null);
-          }}
-        />
-      )}
+    <>
       {
-        // This flag is an unmatched variable
-        scrollBottom > SCROLL_BOTTOM_PADDING && (
+        !isScrolled && <PlaceHolder type={PlaceHolderTypes.LOADING} />
+      }
+      <div className={`sendbird-conversation__messages ${className}`}>
+        <div className="sendbird-conversation__scroll-container">
+          <div className="sendbird-conversation__padding" />
           <div
-            className="sendbird-conversation__scroll-bottom-button"
-            onClick={onClickScrollBot}
-            onKeyDown={onClickScrollBot}
-            tabIndex={0}
-            role="button"
+            className="sendbird-conversation__messages-padding"
+            ref={scrollRef}
+            onScroll={(e) => {
+              handleOnScroll();
+              scrollToBottomHandler(e);
+            }}
           >
-            <Icon
-              width="24px"
-              height="24px"
-              type={IconTypes.CHEVRON_DOWN}
-              fillColor={IconColors.PRIMARY}
-            />
+            {
+              allMessagesFiltered.map((m, idx) => {
+                const {
+                  chainTop,
+                  chainBottom,
+                  hasSeparator,
+                } = getMessagePartsInfo({
+                  allMessages: allMessagesFiltered,
+                  replyType,
+                  isMessageGroupingEnabled,
+                  currentIndex: idx,
+                  currentMessage: m,
+                  currentChannel: currentGroupChannel,
+                });
+                const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
+                return (
+                  <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
+                    <Message
+                      handleScroll={moveScroll}
+                      renderMessage={renderMessage}
+                      message={m}
+                      hasSeparator={hasSeparator}
+                      chainTop={chainTop}
+                      chainBottom={chainBottom}
+                      renderCustomSeparator={renderCustomSeparator}
+                    />
+                  </MessageProvider>
+                );
+              })
+            }
+            {
+              localMessages.map((m, idx) => {
+                const {
+                  chainTop,
+                  chainBottom,
+                } = getMessagePartsInfo({
+                  allMessages: allMessagesFiltered,
+                  replyType,
+                  isMessageGroupingEnabled,
+                  currentIndex: idx,
+                  currentMessage: m,
+                  currentChannel: currentGroupChannel,
+                });
+                const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
+                return (
+                  <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
+                    <Message
+                      handleScroll={moveScroll}
+                      renderMessage={renderMessage}
+                      message={m}
+                      chainTop={chainTop}
+                      chainBottom={chainBottom}
+                      renderCustomSeparator={renderCustomSeparator}
+                    />
+                  </MessageProvider>
+                );
+              })
+            }
+            {/* show frozen notifications, */}
+            {/* show new message notifications, */}
           </div>
-        )
-      }
-    </div>
+        </div>
+        {currentGroupChannel?.isFrozen && (
+          <FrozenNotification className="sendbird-conversation__messages__notification" />
+        )}
+        {unreadSince && (
+          <UnreadCount
+            className="sendbird-conversation__messages__notification"
+            count={currentGroupChannel?.unreadMessageCount}
+            time={unreadSince}
+            onClick={() => {
+              if (scrollRef?.current?.scrollTop) {
+                scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
+              }
+              if (!disableMarkAsRead && !!currentGroupChannel) {
+                markAsReadScheduler.push(currentGroupChannel);
+                messagesDispatcher({
+                  type: messageActionTypes.MARK_AS_READ,
+                  payload: { channel: currentGroupChannel },
+                });
+              }
+              setInitialTimeStamp(null);
+              setAnimatedMessageId(null);
+              setHighLightedMessageId(null);
+            }}
+          />
+        )}
+        {
+          // This flag is an unmatched variable
+          scrollBottom > SCROLL_BOTTOM_PADDING && (
+            <div
+              className="sendbird-conversation__scroll-bottom-button"
+              onClick={onClickScrollBot}
+              onKeyDown={onClickScrollBot}
+              tabIndex={0}
+              role="button"
+            >
+              <Icon
+                width="24px"
+                height="24px"
+                type={IconTypes.CHEVRON_DOWN}
+                fillColor={IconColors.PRIMARY}
+              />
+            </div>
+          )
+        }
+      </div>
+    </>
   );
 };
 
diff --git a/src/modules/Channel/context/ChannelProvider.tsx b/src/modules/Channel/context/ChannelProvider.tsx
@@ -135,6 +135,8 @@ interface UpdateMessageProps {
 
 interface ChannelProviderInterface extends ChannelContextProps, MessageStoreInterface {
   scrollToMessage?(createdAt: number, messageId: number): void;
+  isScrolled?: boolean;
+  setIsScrolled?: React.Dispatch<React.SetStateAction<boolean>>;
   messageActionTypes: Record<string, string>;
   messagesDispatcher: CustomUseReducerDispatcher;
   quoteMessage: SendableMessageType;
@@ -229,6 +231,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
   }, [highlightedMessage]);
   const userFilledMessageListQuery = queries?.messageListParams;
   const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   const [messagesStore, messagesDispatcher] = useReducer(
     messagesReducer,
@@ -358,6 +361,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     latestMessageTimeStamp,
     replyType,
     isVoiceMessageEnabled,
+    setIsScrolled,
   }, {
     logger,
     scrollRef,
@@ -516,6 +520,8 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
       scrollRef,
       scrollBehavior,
       toggleReaction,
+      isScrolled,
+      setIsScrolled,
     }}>
       <UserProfileProvider
         disableUserProfile={props?.disableUserProfile ?? config?.disableUserProfile}
diff --git a/src/modules/Channel/context/dux/actionTypes.js b/src/modules/Channel/context/dux/actionTypes.js
@@ -2,6 +2,7 @@ export const RESET_MESSAGES = 'RESET_MESSAGES';
 
 export const FETCH_INITIAL_MESSAGES_START = 'FETCH_INITIAL_MESSAGES_START';
 export const FETCH_INITIAL_MESSAGES_SUCCESS = 'FETCH_INITIAL_MESSAGES_SUCCESS';
+
 export const FETCH_INITIAL_MESSAGES_FAILURE = 'FETCH_INITIAL_MESSAGES_FAILURE';
 export const FETCH_PREV_MESSAGES_SUCCESS = 'FETCH_PREV_MESSAGES_SUCCESS';
 export const FETCH_PREV_MESSAGES_FAILURE = 'FETCH_PREV_MESSAGES_FAILURE';
diff --git a/src/modules/Channel/context/hooks/useInitialMessagesFetch.js b/src/modules/Channel/context/hooks/useInitialMessagesFetch.js
@@ -10,14 +10,17 @@ function useInitialMessagesFetch({
   userFilledMessageListQuery,
   initialTimeStamp,
   replyType,
+  setIsScrolled,
 }, {
   logger,
   scrollRef,
   messagesDispatcher,
 }) {
   const channelUrl = currentGroupChannel?.url;
+
   useEffect(() => {
     logger.info('Channel useInitialMessagesFetch: Setup started', currentGroupChannel);
+    setIsScrolled(false);
     messagesDispatcher({
       type: messageActionTypes.RESET_MESSAGES,
       payload: null,
@@ -78,10 +81,10 @@ function useInitialMessagesFetch({
         })
         .finally(() => {
           if (!initialTimeStamp) {
-            setTimeout(() => utils.scrollIntoLast(0, scrollRef));
+            setTimeout(() => utils.scrollIntoLast(0, scrollRef, setIsScrolled));
           } else {
             setTimeout(() => {
-              utils.scrollToRenderedMessage(scrollRef, initialTimeStamp);
+              utils.scrollToRenderedMessage(scrollRef, initialTimeStamp, setIsScrolled);
             }, 500);
           }
         });
diff --git a/src/modules/Channel/context/utils.js b/src/modules/Channel/context/utils.js
@@ -8,7 +8,7 @@ import { OutgoingMessageStates } from '../../../utils/exports/getOutgoingMessage
 const UNDEFINED = 'undefined';
 const { SUCCEEDED, FAILED, PENDING } = getSendingMessageStatus();
 
-export const scrollToRenderedMessage = (scrollRef, initialTimeStamp) => {
+export const scrollToRenderedMessage = (scrollRef, initialTimeStamp, setIsScrolled) => {
   try {
     const container = scrollRef.current;
     // scroll into the message with initialTimeStamp
@@ -23,23 +23,27 @@ export const scrollToRenderedMessage = (scrollRef, initialTimeStamp) => {
     }
   } catch {
     // do nothing
+  } finally {
+    setIsScrolled?.(true);
   }
 };
 
 /* eslint-disable default-param-last */
-export const scrollIntoLast = (initialTry = 0, scrollRef) => {
+export const scrollIntoLast = (initialTry = 0, scrollRef, setIsScrolled) => {
   const MAX_TRIES = 10;
   const currentTry = initialTry;
   if (currentTry > MAX_TRIES) {
+    setIsScrolled?.(true);
     return;
   }
   try {
     const scrollDOM = scrollRef?.current || document.querySelector('.sendbird-conversation__messages-padding');
     // eslint-disable-next-line no-multi-assign
     scrollDOM.scrollTop = scrollDOM.scrollHeight;
+    setIsScrolled?.(true);
   } catch (error) {
     setTimeout(() => {
-      scrollIntoLast(currentTry + 1, scrollRef);
+      scrollIntoLast(currentTry + 1, scrollRef, setIsScrolled);
     }, 500 * currentTry);
   }
 };

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ export interface UseHandleOnScrollCallbackProps {`
`10`	`10`	`onScroll(callback: () => void): void;`
`11`	`11`	`scrollRef: React.RefObject<HTMLDivElement>;`
`12`	`12`	`setShowScrollDownButton?: React.Dispatch<React.SetStateAction<boolean>>;`
	`13`	`+ setIsScrolled?: React.Dispatch<React.SetStateAction<boolean>>;`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`export function calcScrollBottom(scrollHeight: number, scrollTop: number): number {`