fix: stabilize popper components

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.5.0",
+    "@stream-io/stream-chat-css": "4.6.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -35,6 +35,7 @@
         <div
           class="str-chat__message-simple__actions str-chat__message-options"
           data-testid="message-options"
+          [class.str-chat__message-actions-open]="isActionBoxOpen"
           [class.str-chat__message-edit-in-progress]="isEditing"
           *ngIf="areOptionsVisible"
         >
@@ -56,6 +57,7 @@
             [popperHideOnClickOutside]="true"
             [popperHideOnMouseLeave]="false"
             [popperDisableAnimation]="true"
+            (popperOnHidden)="isActionBoxOpen = false"
           >
             <popper-content #popperContent>
               <ng-template

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

@@ -567,18 +567,6 @@ describe('MessageComponent', () => {
     });
   });
 
-  it('should close message actions box on mouseleave event', () => {
-    component.enabledMessageActions = ['update-own-message', 'flag-message'];
-    component.isActionBoxOpen = true;
-    component.ngOnChanges({ enabledMessageActions: {} as SimpleChange });
-    fixture.detectChanges();
-
-    queryContainer()?.dispatchEvent(new Event('mouseleave'));
-    fixture.detectChanges();
-
-    expect(component.isActionBoxOpen).toBeFalse();
-  });
-
   it('should provide #enabledActions to message actions box', () => {
     component.isActionBoxOpen = true;
     fixture.detectChanges();

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

@@ -161,6 +161,9 @@ export class MessageComponent
         }
         if (isEditing !== this.isEditing) {
           this.isEditing = isEditing;
+          if (!this.isEditing) {
+            this.isActionBoxOpen = false;
+          }
           if (this.isViewInited) {
             this.cdRef.detectChanges();
           }
@@ -257,11 +260,6 @@ export class MessageComponent
 
   ngAfterViewInit(): void {
     this.isViewInited = true;
-    this.ngZone.runOutsideAngular(() => {
-      this.container?.nativeElement.addEventListener('mouseleave', () =>
-        this.mouseLeft()
-      );
-    });
   }
 
   ngOnDestroy(): void {
@@ -402,14 +400,6 @@ export class MessageComponent
     this.createMessageParts(false);
   }
 
-  mouseLeft() {
-    if (this.isActionBoxOpen) {
-      this.ngZone.run(() => {
-        this.isActionBoxOpen = false;
-      });
-    }
-  }
-
   private createMessageParts(shouldTranslate = true) {
     this.messageTextParts = undefined;
     this.messageText = undefined;