fix: Message list scroll issue on iOS

Author: szuperaz

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

@@ -645,6 +645,9 @@ describe('AttachmentListComponent', () => {
     });
 
     it('should open image viewer modal - single image', () => {
+      const imageModalSpy = jasmine.createSpy();
+      component.imageModalStateChange.subscribe(imageModalSpy);
+
       const attachment = {
         type: 'image',
         image_url: 'http://url1',
@@ -663,6 +666,7 @@ describe('AttachmentListComponent', () => {
       expect(component.imagesToViewCurrentIndex).toBe(0);
       expect(queryImageModalPrevButton()?.style.visibility).toBe('hidden');
       expect(queryImageModalNextButton()?.style.visibility).toBe('hidden');
+      expect(imageModalSpy).toHaveBeenCalledWith('opened');
     });
 
     it('should open image viewer modal - image gallery', () => {
@@ -773,19 +777,23 @@ describe('AttachmentListComponent', () => {
       expect(queryImageModalNextButton()?.style.visibility).toBe('hidden');
     });
 
-    // Will be part of modal implementation
-    // eslint-disable-next-line jasmine/no-disabled-tests
-    xit('should deselect images if modal is closed', () => {
+    it('should deselect images if modal is closed', () => {
+      const imageModalSpy = jasmine.createSpy();
+      component.imageModalStateChange.subscribe(imageModalSpy);
+      imageModalSpy.calls.reset();
       const attachment = {
         type: 'image',
         image_url: 'http://url1',
       };
+      component.attachments = [attachment];
+      component.ngOnChanges({ attachments: {} as SimpleChange });
       component.imagesToView = [attachment];
       fixture.detectChanges();
       queryImageModal().close();
       fixture.detectChanges();
 
       expect(component.imagesToView).toEqual([]);
+      expect(imageModalSpy).toHaveBeenCalledWith('closed');
     });
   });
 

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

@@ -1,8 +1,10 @@
 import {
   Component,
+  EventEmitter,
   HostBinding,
   Input,
   OnChanges,
+  Output,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -43,6 +45,12 @@ export class AttachmentListComponent implements OnChanges {
    * The attachments to display
    */
   @Input() attachments: Attachment<DefaultStreamChatGenerics>[] = [];
+  /**
+   * Emits the state of the image carousel window
+   */
+  @Output() readonly imageModalStateChange = new EventEmitter<
+    'opened' | 'closed'
+  >();
   @HostBinding() class = 'str-chat__attachment-list-angular-host';
   orderedAttachments: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
@@ -172,6 +180,7 @@ export class AttachmentListComponent implements OnChanges {
   }
 
   openImageModal(attachments: Attachment[], selectedIndex = 0) {
+    this.imageModalStateChange.next('opened');
     this.imagesToView = attachments;
     this.imagesToViewCurrentIndex = selectedIndex;
   }
@@ -268,6 +277,7 @@ export class AttachmentListComponent implements OnChanges {
   }
 
   private closeImageModal() {
+    this.imageModalStateChange.next('closed');
     this.imagesToView = [];
   }
 }

projects/stream-chat-angular/src/lib/message/message.component.html

@@ -163,25 +163,19 @@
             "
           ></ng-container>
         </div>
-        <div class="str-chat__message-bubble">
+        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->
+        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->
+        <div
+          class="str-chat__message-bubble"
+          style="transform: {{
+            imageAttachmentModalState === 'opened'
+              ? 'none'
+              : 'translate3d(0, 0, 0)'
+          }}"
+        >
           <ng-container *ngIf="hasAttachment && !message?.quoted_message">
-            <ng-template
-              #defaultAttachments
-              let-messageId="messageId"
-              let-attachments="attachments"
-              let-parentMessageId="parentMessageId"
-            >
-              <stream-attachment-list
-                [messageId]="messageId"
-                [attachments]="attachments"
-                [parentMessageId]="parentMessageId"
-              ></stream-attachment-list>
-            </ng-template>
             <ng-container
-              *ngTemplateOutlet="
-                attachmentListTemplate || defaultAttachments;
-                context: getAttachmentListContext()
-              "
+              *ngTemplateOutlet="attachmentsTemplate"
             ></ng-container>
           </ng-container>
           <div
@@ -209,11 +203,11 @@
               "
             >
               <ng-container *ngTemplateOutlet="quotedMessage"></ng-container>
-              <stream-attachment-list
-                *ngIf="hasAttachment && message?.quoted_message"
-                [attachments]="message!.attachments!"
-                [messageId]="message!.id"
-              ></stream-attachment-list>
+              <ng-container *ngIf="hasAttachment && message?.quoted_message">
+                <ng-container
+                  *ngTemplateOutlet="attachmentsTemplate"
+                ></ng-container>
+              </ng-container>
               <div
                 data-testid="client-error-message"
                 *ngIf="message?.type === 'error'"
@@ -365,11 +359,13 @@
           let-messageId="messageId"
           let-attachments="attachments"
           let-parentMessageId="parentMessageId"
+          let-imageModalStateChangeHandler="imageModalStateChangeHandler"
         >
           <stream-attachment-list
             [messageId]="messageId"
             [attachments]="attachments"
             [parentMessageId]="parentMessageId"
+            (imageModalStateChange)="imageModalStateChangeHandler($event)"
           ></stream-attachment-list>
         </ng-template>
         <ng-container
@@ -623,3 +619,26 @@
     </button>
   </div>
 </ng-template>
+
+<ng-template #attachmentsTemplate>
+  <ng-template
+    #defaultAttachments
+    let-messageId="messageId"
+    let-attachments="attachments"
+    let-parentMessageId="parentMessageId"
+    let-imageModalStateChangeHandler="imageModalStateChangeHandler"
+  >
+    <stream-attachment-list
+      [messageId]="messageId"
+      [attachments]="attachments"
+      [parentMessageId]="parentMessageId"
+      (imageModalStateChange)="imageModalStateChangeHandler($event)"
+    ></stream-attachment-list>
+  </ng-template>
+  <ng-container
+    *ngTemplateOutlet="
+      attachmentListTemplate || defaultAttachments;
+      context: getAttachmentListContext()
+    "
+  ></ng-container>
+</ng-template>

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

@@ -89,6 +89,7 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   popperPlacementAuto = NgxPopperjsPlacements.AUTO;
   shouldDisplayTranslationNotice = false;
   displayedMessageTextContent: 'original' | 'translation' = 'original';
+  imageAttachmentModalState: 'opened' | 'closed' = 'closed';
   private quotedMessageAttachments: Attachment[] | undefined;
   private user: UserResponse<DefaultStreamChatGenerics> | undefined;
   private subscriptions: Subscription[] = [];
@@ -258,6 +259,8 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
       messageId: this.message?.id || '',
       attachments: this.message?.attachments || [],
       parentMessageId: this.message?.parent_id,
+      imageModalStateChangeHandler: (state) =>
+        (this.imageAttachmentModalState = state),
     };
   }
 

projects/stream-chat-angular/src/lib/types.ts

@@ -162,6 +162,7 @@ export type AttachmentListContext = {
   messageId: string;
   attachments: Attachment<DefaultStreamChatGenerics>[];
   parentMessageId?: string;
+  imageModalStateChangeHandler?: (state: 'opened' | 'closed') => {};
 };
 
 export type AvatarType = 'channel' | 'user';