fix: show UnreadMessagesNotification when MessageList is scrolled to bottom via Element.scrollTo (#2261)

Author: MartinCupela

src/components/MessageList/MessageList.tsx

@@ -94,10 +94,6 @@ const MessageListWithContext = <
   const loadMoreScrollThreshold = internalInfiniteScrollProps?.threshold || 250;
   const currentUserChannelReadState = client.user && read?.[client.user.id];
 
-  const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({
-    unreadCount: currentUserChannelReadState?.unread_messages,
-  });
-
   const {
     hasNewMessages,
     isMessageListScrolledToBottom,
@@ -113,6 +109,11 @@ const MessageListWithContext = <
     suppressAutoscroll,
   });
 
+  const { show: showUnreadMessagesNotification } = useUnreadMessagesNotification({
+    isMessageListScrolledToBottom,
+    unreadCount: currentUserChannelReadState?.unread_messages,
+  });
+
   useMarkRead({
     isMessageListScrolledToBottom,
     markReadOnScrolledToBottom,

src/components/MessageList/hooks/MessageList/useScrollLocationLogic.tsx

@@ -37,14 +37,12 @@ export const useScrollLocationLogic = <
   const [isMessageListScrolledToBottom, setIsMessageListScrolledToBottom] = useState(true);
   const closeToBottom = useRef(false);
   const closeToTop = useRef(false);
-  const scrollCounter = useRef({ autoScroll: 0, scroll: 0 });
 
   const scrollToBottom = useCallback(() => {
     if (!listElement?.scrollTo || hasMoreNewer || suppressAutoscroll) {
       return;
     }
 
-    scrollCounter.current.autoScroll += 1;
     listElement.scrollTo({
       top: listElement.scrollHeight,
     });

src/components/MessageList/hooks/MessageList/useUnreadMessagesNotification.ts

@@ -1,5 +1,5 @@
 import { useChannelStateContext } from '../../../../context';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { MESSAGE_LIST_MAIN_PANEL_CLASS } from '../../MessageListMainPanel';
 import { UNREAD_MESSAGE_SEPARATOR_CLASS } from '../../UnreadMessagesSeparator';
 
@@ -10,14 +10,17 @@ const targetIsVisibleInContainer = (element: Element, container: Element) => {
 };
 
 export type UseUnreadMessagesNotificationParams = {
+  isMessageListScrolledToBottom: boolean;
   unreadCount?: number;
 };
 
 export const useUnreadMessagesNotification = ({
+  isMessageListScrolledToBottom,
   unreadCount,
 }: UseUnreadMessagesNotificationParams) => {
   const { messages } = useChannelStateContext('UnreadMessagesNotification');
   const [show, setShow] = useState(false);
+  const isScrolledAboveTargetTop = useRef(false);
   const intersectionObserverIsSupported = typeof IntersectionObserver !== 'undefined';
 
   useEffect(() => {
@@ -41,9 +44,13 @@ export const useUnreadMessagesNotification = ({
       (elements) => {
         if (!elements.length) return;
         const { boundingClientRect, isIntersecting, rootBounds } = elements[0];
-        const isScrolledAboveTargetTop =
-          rootBounds && boundingClientRect && rootBounds.bottom < boundingClientRect.top;
-        setShow(!isIntersecting && !isScrolledAboveTargetTop);
+        const isScrolledAboveTargetTopCurrent = !!(
+          rootBounds &&
+          boundingClientRect &&
+          rootBounds.bottom < boundingClientRect.top
+        );
+        setShow(!isIntersecting && !isScrolledAboveTargetTopCurrent);
+        isScrolledAboveTargetTop.current = isScrolledAboveTargetTopCurrent;
       },
       { root: msgListPanel },
     );
@@ -54,5 +61,18 @@ export const useUnreadMessagesNotification = ({
     };
   }, [intersectionObserverIsSupported, messages, unreadCount]);
 
+  useEffect(() => {
+    /**
+     * Handle situation when scrollToBottom is called from another component when the msg list is scrolled above the observed target (unread separator).
+     * The intersection observer is not triggered when Element.scrollTo() is called. So we end up in a situation when we are scrolled to the bottom
+     * and at the same time scrolled above the observed target.
+     */
+
+    if (unreadCount && isMessageListScrolledToBottom && isScrolledAboveTargetTop.current) {
+      setShow(true);
+      isScrolledAboveTargetTop.current = false;
+    }
+  }, [isMessageListScrolledToBottom, unreadCount]);
+
   return { show: show && intersectionObserverIsSupported };
 };