fix: Older message is deselected after message set switch

Author: szuperaz

projects/stream-chat-angular/src/lib/message-list/message-list.component.spec.ts

@@ -442,6 +442,29 @@ describe('MessageListComponent', () => {
     /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
   });
 
+  it(`should deselect oldest message if it's removed from the list`, () => {
+    const olderMessages = generateMockMessages(50, true);
+    channelServiceMock.activeChannelMessages$.next(olderMessages);
+    fixture.detectChanges();
+
+    const newerMessages = generateMockMessages();
+    channelServiceMock.activeChannelMessages$.next(newerMessages);
+    fixture.detectChanges();
+    spyOn(channelServiceMock, 'loadMoreMessages').and.callFake(() =>
+      channelServiceMock.activeChannelMessages$.next([
+        ...generateMockMessages(25, true),
+        ...newerMessages,
+      ])
+    );
+
+    const scrollContainer = queryScrollContainer()!;
+    scrollContainer.scrollTo({ top: 0 });
+    scrollContainer.dispatchEvent(new Event('scroll'));
+    fixture.detectChanges();
+
+    expect(Math.floor(scrollContainer.scrollTop)).not.toBe(0);
+  });
+
   it('should get unread message information from "message.new" event if an older message list is displayed', () => {
     let channel!: Channel<DefaultStreamChatGenerics>;
     channelServiceMock.activeChannel$.subscribe((c) => (channel = c!));

projects/stream-chat-angular/src/lib/message-list/message-list.component.ts

@@ -65,7 +65,7 @@ export class MessageListComponent
   private latestMessage: { id: string; created_at: Date } | undefined;
   private hasNewMessages: boolean | undefined;
   private containerHeight: number | undefined;
-  private oldestMessageDate: Date | undefined;
+  private oldestMessage: { id: string; created_at: Date } | undefined;
   private olderMassagesLoaded: boolean | undefined;
   private isNewMessageSentByUser: boolean | undefined;
   private subscriptions: Subscription[] = [];
@@ -345,13 +345,17 @@ export class MessageListComponent
         }
         const currentLatestMessage = messages[messages.length - 1];
         this.newMessageReceived(currentLatestMessage);
-        const currentOldestMessageDate = messages[0].created_at;
-        if (!this.oldestMessageDate) {
-          this.oldestMessageDate = currentOldestMessageDate;
+        const currentOldestMessage = messages[0];
+        if (
+          !this.oldestMessage ||
+          !messages.find((m) => m.id === this.oldestMessage!.id)
+        ) {
+          this.oldestMessage = currentOldestMessage;
         } else if (
-          this.oldestMessageDate?.getTime() > currentOldestMessageDate.getTime()
+          this.oldestMessage.created_at.getTime() >
+          currentOldestMessage.created_at.getTime()
         ) {
-          this.oldestMessageDate = currentOldestMessageDate;
+          this.oldestMessage = currentOldestMessage;
           this.olderMassagesLoaded = true;
         }
       }),
@@ -391,7 +395,7 @@ export class MessageListComponent
     this.isUserScrolled = false;
     this.containerHeight = undefined;
     this.olderMassagesLoaded = false;
-    this.oldestMessageDate = undefined;
+    this.oldestMessage = undefined;
     this.unreadMessageCount = 0;
     this.prevScrollTop = undefined;
     this.isNewMessageSentByUser = undefined;