fix: auto scroll to bottom when the message was deleted or removed from the list (#3187)

* fix: auto scroll to bottom when the message was deleted or removed from the list

* fix: auto scroll to bottom when the message was deleted or removed from the list

* fix: update comment

Author: khushal87

package/src/components/MessageList/MessageList.tsx

@@ -575,6 +575,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   ]);
 
   useEffect(() => {
+    /**
+     * Condition to check if a message is removed from MessageList.
+     * Eg: This would happen when giphy search is cancelled, message is deleted with visibility "never" etc.
+     * If such a case arises, we scroll to bottom.
+     */
+    const isMessageRemovedFromMessageList =
+      messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current;
     /**
      * Scroll down when
      * created_at timestamp of top message before update is lesser than created_at timestamp of top message after update - channel has resynced
@@ -584,18 +591,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         return;
       }
 
-      /**
-       * Condition to check if a message is removed from MessageList.
-       * Eg: This would happen when giphy search is cancelled, etc.
-       * If such a case arises, we scroll to bottom.
-       */
-      const isMessageRemovedFromMessageList =
-        messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current;
       if (
-        isMessageRemovedFromMessageList ||
-        (topMessageBeforeUpdate.current?.created_at &&
-          topMessageAfterUpdate?.created_at &&
-          topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at)
+        topMessageBeforeUpdate.current?.created_at &&
+        topMessageAfterUpdate?.created_at &&
+        topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at
       ) {
         channelResyncScrollSet.current = false;
         setScrollToBottomButtonVisible(false);
@@ -615,8 +614,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       }
     };
 
-    // TODO: Think about if this is really needed?
-    if (threadList) {
+    if (threadList || isMessageRemovedFromMessageList) {
       scrollToBottomIfNeeded();
     }