FIX: Prevent chat message actions to disappear on mouseleave (#23063)

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.hbs

@@ -2,7 +2,6 @@
   <div
     {{did-insert this.setup}}
     {{did-update this.setup this.chat.activeMessage.model.id}}
-    {{on "mouseleave" this.onMouseleave}}
     {{on "wheel" this.onWheel passive=true}}
     {{will-destroy this.teardown}}
     class={{concat-class

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-desktop.js

@@ -48,21 +48,6 @@ export default class ChatMessageActionsDesktop extends Component {
     this.chat.activeMessage = null;
   }
 
-  @action
-  onMouseleave(event) {
-    // if the mouse is leaving the actions menu for the actual menu, don't close it
-    // this will avoid the menu rerendering
-    if (
-      (event.toElement || event.relatedTarget)?.closest(
-        ".chat-message-container"
-      )
-    ) {
-      return;
-    }
-
-    this.chat.activeMessage = null;
-  }
-
   @action
   setup(element) {
     this.popper?.destroy();

plugins/chat/assets/javascripts/discourse/components/chat-message.gjs

@@ -258,6 +258,12 @@ export default class ChatMessage extends Component {
     return this.chat.userCanInteractWithChat && this.site.desktopView;
   }
 
+  get secondaryActionsIsExpanded() {
+    return document.querySelector(
+      ".more-buttons.secondary-actions.is-expanded"
+    );
+  }
+
   @action
   expand() {
     const recursiveExpand = (message) => {
@@ -382,11 +388,13 @@ export default class ChatMessage extends Component {
       return;
     }
 
-    this._onMouseEnterMessageDebouncedHandler = discourseDebounce(
-      this,
-      this._debouncedOnHoverMessage,
-      250
-    );
+    if (!this.secondaryActionsIsExpanded) {
+      this._onMouseEnterMessageDebouncedHandler = discourseDebounce(
+        this,
+        this._debouncedOnHoverMessage,
+        250
+      );
+    }
   }
 
   @action
@@ -399,7 +407,9 @@ export default class ChatMessage extends Component {
       return;
     }
 
-    this._setActiveMessage();
+    if (!this.secondaryActionsIsExpanded) {
+      this._setActiveMessage();
+    }
   }
 
   @action
@@ -417,8 +427,9 @@ export default class ChatMessage extends Component {
     ) {
       return;
     }
-
-    this.chat.activeMessage = null;
+    if (!this.secondaryActionsIsExpanded) {
+      this.chat.activeMessage = null;
+    }
   }
 
   @bind

plugins/chat/spec/system/chat_channel_spec.rb

@@ -287,4 +287,31 @@ RSpec.describe "Chat channel", type: :system do
       )
     end
   end
+
+  context "when opening message secondary options" do
+    it "doesn’t hide dropdown on mouseleave" do
+      chat.visit_channel(channel_1)
+      last_message = find(".chat-message-container:last-child")
+      last_message.hover
+
+      expect(page).to have_css(
+        ".chat-message-actions-container[data-id='#{last_message["data-id"]}']",
+      )
+
+      find(".chat-message-actions-container .secondary-actions").click
+      expect(page).to have_css(
+        ".chat-message-actions-container .secondary-actions .select-kit-body",
+      )
+
+      find("#site-logo").hover
+      expect(page).to have_css(
+        ".chat-message-actions-container .secondary-actions .select-kit-body",
+      )
+
+      find("#site-logo").click
+      expect(page).to have_no_css(
+        ".chat-message-actions-container .secondary-actions .select-kit-body",
+      )
+    end
+  end
 end