From 53281db9b950bf03771e5ed1e2337d7b16d13632 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Fri, 4 Feb 2022 15:40:54 +0100
Subject: [PATCH] fix: Close message actions on mouseleave #177

---
 .../src/lib/message/message.component.html            |  1 +
 .../src/lib/message/message.component.spec.ts         | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/projects/stream-chat-angular/src/lib/message/message.component.html b/projects/stream-chat-angular/src/lib/message/message.component.html
index 12cf64b7..eddacce8 100644
--- a/projects/stream-chat-angular/src/lib/message/message.component.html
+++ b/projects/stream-chat-angular/src/lib/message/message.component.html
@@ -13,6 +13,7 @@
     areReactionsEnabled !== false && hasReactions
   "
   data-testid="message-container"
+  (mouseleave)="isActionBoxOpen = false"
 >
   <ng-container *ngIf="!message?.deleted_at; else deletedMessage">
     <ng-container *ngIf="message?.type !== 'system'; else systemMessage">
diff --git a/projects/stream-chat-angular/src/lib/message/message.component.spec.ts b/projects/stream-chat-angular/src/lib/message/message.component.spec.ts
index a2a77042..b3c75c9d 100644
--- a/projects/stream-chat-angular/src/lib/message/message.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/message/message.component.spec.ts
@@ -468,6 +468,17 @@ describe('MessageComponent', () => {
     expect(messageActionsBoxComponent.isOpen).toBeTrue();
   });
 
+  it('should close message actions box on mouseleave event', () => {
+    component.enabledMessageActions = ['edit', 'flag'];
+    component.isActionBoxOpen = true;
+    fixture.detectChanges();
+
+    queryContainer()?.dispatchEvent(new Event('mouseleave'));
+    fixture.detectChanges();
+
+    expect(component.isActionBoxOpen).toBeFalse();
+  });
+
   it('should provide #enabledActions to message actions box', () => {
     expect(messageActionsBoxComponent.enabledActions).toBe(
       component.enabledMessageActions