From 99e6f25c4e774fa1d01f60bc54f0f0660eb4391a Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 9 Jun 2021 12:53:10 +0000
Subject: [PATCH] tippy: Fix vertical stacking for reaction button during
 message-fade.

This fixes the same bug in the previous commit for add reaction
button.
---
 static/js/tippyjs.js                   | 12 +++++++-----
 static/templates/message_reactions.hbs |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index e3f888f756..23988232c8 100644
--- a/static/js/tippyjs.js
+++ b/static/js/tippyjs.js
@@ -52,14 +52,16 @@ export function initialize() {
     // message reaction tooltip showing who reacted.
     let observer;
     delegate("body", {
-        target: ".message_reaction",
+        target: ".message_reaction, .reaction_button",
         placement: "bottom",
         onShow(instance) {
             const elem = $(instance.reference);
-            const local_id = elem.attr("data-reaction-id");
-            const message_id = rows.get_message_id(instance.reference);
-            const title = reactions.get_reaction_title_data(message_id, local_id);
-            instance.setContent(title);
+            if (!instance.reference.classList.contains("reaction_button")) {
+                const local_id = elem.attr("data-reaction-id");
+                const message_id = rows.get_message_id(instance.reference);
+                const title = reactions.get_reaction_title_data(message_id, local_id);
+                instance.setContent(title);
+            }
 
             // Use MutationObserver to check for removal of nodes on which tooltips
             // are still active.
diff --git a/static/templates/message_reactions.hbs b/static/templates/message_reactions.hbs
index cc9c2aed74..5a7f2edbaf 100644
--- a/static/templates/message_reactions.hbs
+++ b/static/templates/message_reactions.hbs
@@ -1,7 +1,7 @@
 {{#each this/msg/message_reactions}}
 {{> message_reaction}}
 {{/each}}
-<div class="reaction_button tippy-zulip-tooltip" data-tippy-content="{{t 'Add emoji reaction' }}" aria-label="{{t 'Add emoji reaction' }} (:)">
+<div class="reaction_button" data-tippy-content="{{t 'Add emoji reaction' }}" aria-label="{{t 'Add emoji reaction' }} (:)">
     <i class="fa fa-smile-o" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Add emoji reaction' }} (:)"></i>
     <div class="message_reaction_count">+</div>
 </div>