Merge pull request #545 from GetStream/fix-autoclose-popper

fix: autoclose behavior on message actions menu

Author: szuperaz

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "4.6.2",
+    "@stream-io/stream-chat-css": "4.7.2",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -69,6 +69,7 @@
                 let-customActions="customActions"
               >
                 <stream-message-actions-box
+                  (click)="messageActionsBoxClicked(popperContent)"
                   *ngIf="isOpen"
                   [isOpen]="isOpen"
                   [isMine]="isMine"

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

@@ -34,7 +34,11 @@ import { Subscription } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { listUsers } from '../list-users';
 import { ThemeService } from '../theme.service';
-import { NgxPopperjsTriggers, NgxPopperjsPlacements } from 'ngx-popperjs';
+import {
+  NgxPopperjsTriggers,
+  NgxPopperjsPlacements,
+  NgxPopperjsContentComponent,
+} from 'ngx-popperjs';
 import { DateParserService } from '../date-parser.service';
 import { MessageService } from '../message.service';
 import { MessageActionsService } from '../message-actions.service';
@@ -282,6 +286,14 @@ export class MessageComponent
     }
   }
 
+  messageActionsBoxClicked(popperContent: NgxPopperjsContentComponent) {
+    if (this.isEditing) {
+      return;
+    }
+
+    popperContent.hide();
+  }
+
   getAttachmentListContext(): AttachmentListContext {
     return {
       messageId: this.message?.id || '',