Merge pull request #157 from GetStream/fix-message-edit

fix: Message edit

Author: szuperaz

package-lock.json

@@ -1,4 +1,3 @@
-import { OnInit } from '@angular/core';
 import {
   AfterViewInit,
   ChangeDetectorRef,
@@ -40,7 +39,7 @@ import { TextareaInterface } from './textarea.interface';
   providers: [AttachmentService],
 })
 export class MessageInputComponent
-  implements OnInit, OnChanges, OnDestroy, AfterViewInit
+  implements OnChanges, OnDestroy, AfterViewInit
 {
   @Input() isFileUploadEnabled: boolean | undefined;
   @Input() areMentionsEnabled: boolean | undefined;
@@ -64,6 +63,7 @@ export class MessageInputComponent
   private textareaAnchor!: TextareaDirective;
   private subscriptions: Subscription[] = [];
   private hideNotification: Function | undefined;
+  private isViewInited = false;
 
   constructor(
     private channelService: ChannelService,
@@ -85,17 +85,6 @@ export class MessageInputComponent
         }
       )
     );
-    this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
-    this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
-    this.acceptedFileTypes = this.configService.acceptedFileTypes;
-    this.isMultipleFileUploadEnabled =
-      this.configService.isMultipleFileUploadEnabled;
-    this.areMentionsEnabled = this.configService.areMentionsEnabled;
-    this.mentionAutocompleteItemTemplate =
-      this.configService.mentionAutocompleteItemTemplate;
-    this.mentionScope = this.configService.mentionScope;
-  }
-  ngOnInit(): void {
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
         this.textareaValue = '';
@@ -106,14 +95,26 @@ export class MessageInputComponent
             capabilities.indexOf('upload-file') !== -1;
           this.canSendLinks = capabilities.indexOf('send-links') !== -1;
           this.canSendMessages = capabilities.indexOf('send-message') !== -1;
-          this.cdRef.detectChanges();
-          this.initTextarea();
+          if (this.isViewInited) {
+            this.cdRef.detectChanges();
+            this.initTextarea();
+          }
         }
       })
     );
+    this.attachmentUploads$ = this.attachmentService.attachmentUploads$;
+    this.isFileUploadEnabled = this.configService.isFileUploadEnabled;
+    this.acceptedFileTypes = this.configService.acceptedFileTypes;
+    this.isMultipleFileUploadEnabled =
+      this.configService.isMultipleFileUploadEnabled;
+    this.areMentionsEnabled = this.configService.areMentionsEnabled;
+    this.mentionAutocompleteItemTemplate =
+      this.configService.mentionAutocompleteItemTemplate;
+    this.mentionScope = this.configService.mentionScope;
   }
 
   ngAfterViewInit(): void {
+    this.isViewInited = true;
     this.initTextarea();
   }
 

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

@@ -29,10 +29,11 @@ export class TextareaDirective implements OnChanges {
   @Output() readonly send = new EventEmitter<void>();
   @Output() readonly userMentions = new EventEmitter<UserResponse[]>();
   private subscriptions: Subscription[] = [];
-
+  private unpropagatedChanges: SimpleChanges[] = [];
   constructor(public viewContainerRef: ViewContainerRef) {}
 
   ngOnChanges(changes: SimpleChanges): void {
+    this.unpropagatedChanges.push(changes);
     if (!this.componentRef) {
       return;
     }
@@ -56,6 +57,11 @@ export class TextareaDirective implements OnChanges {
             )
           );
         }
+        this.componentRef.instance.areMentionsEnabled = this.areMentionsEnabled;
+        this.componentRef.instance.mentionAutocompleteItemTemplate =
+          this.mentionAutocompleteItemTemplate;
+        this.componentRef.instance.mentionScope = this.mentionScope;
+        this.componentRef.instance.value = this.value;
       }
     }
     if (changes.areMentionsEnabled) {
@@ -72,7 +78,12 @@ export class TextareaDirective implements OnChanges {
       this.componentRef.instance.value = this.value;
     }
     // ngOnChanges not called for dynamic components since we don't use template binding
+    let changesToPropagate = {};
+    this.unpropagatedChanges.forEach(
+      (c) => (changesToPropagate = { ...changesToPropagate, ...c })
+    );
     // eslint-disable-next-line @angular-eslint/no-lifecycle-call
-    this.componentRef.instance.ngOnChanges(changes);
+    this.componentRef.instance.ngOnChanges(changesToPropagate);
+    this.unpropagatedChanges = [];
   }
 }