Turn of scroll reporting while jump to message is in progress

GetStream · Jul 15, 2024 · b580fcd · b580fcd
1 parent b5281ce
commit b580fcd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.spec.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.spec.ts
@@ -464,7 +464,7 @@ describe('MessageListComponent', () => {
 
   it('should turn of programatic scroll adjustment and message load while jumping to message', () => {
     // This test uses private memebers to set up test cases, this is not nice, but this is because creating these cases otherwise would require a lot of complex logic
-    component.highlightedMessageId = 'messageId';
+    component['isJumpingToMessage'] = true;
     component.isUserScrolled = true;
     spyOn(component, 'scrollToBottom');
     component.ngAfterViewChecked();

diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
@@ -129,6 +129,7 @@ export class MessageListComponent
   unreadCount?: number;
   isJumpingToLatestUnreadMessage = false;
   isJumpToLatestButtonVisible = true;
+  isJumpingToMessage = false;
   scroll$ = new Subject<void>();
   @ViewChild('scrollContainer')
   private scrollContainer!: ElementRef<HTMLElement>;
@@ -411,7 +412,7 @@ export class MessageListComponent
   }
 
   ngAfterViewChecked() {
-    if (this.highlightedMessageId) {
+    if (this.isJumpingToMessage) {
       this.isNewMessageSentByUser = false;
       this.messageIdToAnchorTo = undefined;
       this.anchorMessageTopOffset = undefined;
@@ -534,7 +535,7 @@ export class MessageListComponent
       }
     }
 
-    if (prevScrollPosition !== scrollPosition) {
+    if (prevScrollPosition !== scrollPosition && !this.isJumpingToMessage) {
       if (scrollPosition === 'top' || scrollPosition === 'bottom') {
         this.virtualizedList?.virtualizedItems$
           .pipe(take(1))
@@ -750,6 +751,7 @@ export class MessageListComponent
             } else if (this.direction === 'top-to-bottom') {
               jumpToMessage.position = 'top';
             }
+            this.isJumpingToMessage = true;
             this.scrollMessageIntoView({
               messageId: this.firstUnreadMessageId || messageId,
               position: jumpToMessage.position || 'middle',
@@ -767,6 +769,7 @@ export class MessageListComponent
     this.newMessageCountWhileBeingScrolled = 0;
     this.isNewMessageSentByUser = false;
     this.isLatestMessageInList = true;
+    this.isJumpingToMessage = false;
     this.scrollPosition$.next('bottom');
   }
 
@@ -804,6 +807,9 @@ export class MessageListComponent
           ? this.scrollToBottom()
           : this.scrollToTop();
       }
+      setTimeout(() => {
+        this.isJumpingToMessage = false;
+      }, 0);
       setTimeout(() => {
         this.highlightedMessageId = undefined;
         this.firstUnreadMessageId = undefined;