1 files changed, 21 insertions, 0 deletions
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index 243ee4d723a..28e8240169d 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -132,6 +132,23 @@ class FilteredSearchVisualTokens {
       .catch(() => { });
   }
 
+  static updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
+    const container = tokenValueContainer;
+    const element = tokenValueElement;
+
+    return import(/* webpackChunkName: 'emoji' */ '../emoji')
+      .then((Emoji) => {
+        if (!Emoji.isEmojiNameValid(tokenValue)) {
+          return;
+        }
+
+        container.dataset.originalValue = tokenValue;
+        element.innerHTML = Emoji.glEmojiTag(tokenValue);
+      })
+      // ignore error and leave emoji name in the search bar
+      .catch(() => { });
+  }
+
   static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
     const tokenValueContainer = parentElement.querySelector('.value-container');
     const tokenValueElement = tokenValueContainer.querySelector('.value');
@@ -144,6 +161,10 @@ class FilteredSearchVisualTokens {
       FilteredSearchVisualTokens.updateUserTokenAppearance(
         tokenValueContainer, tokenValueElement, tokenValue,
       );
+    } else if (tokenType === 'my-reaction') {
+      FilteredSearchVisualTokens.updateEmojiTokenAppearance(
+        tokenValueContainer, tokenValueElement, tokenValue,
+      );
     }
   }