1 files changed, 12 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
index 1ad0ca36bf8..9ab91e567e6 100644
--- a/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
+++ b/app/assets/javascripts/vue_shared/components/gfm_autocomplete/gfm_autocomplete.vue
@@ -4,6 +4,7 @@ import {
   GfmAutocompleteType,
   tributeConfig,
 } from 'ee_else_ce/vue_shared/components/gfm_autocomplete/utils';
+import * as Emoji from '~/emoji';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -27,7 +28,7 @@ export default {
   },
   computed: {
     config() {
-      return this.autocompleteTypes.map(type => ({
+      return this.autocompleteTypes.map((type) => ({
         ...tributeConfig[type].config,
         loadingItemTemplate: `<span class="gl-spinner gl-vertical-align-text-bottom gl-ml-3 gl-mr-2"></span>${__(
           'Loading',
@@ -55,7 +56,7 @@ export default {
 
       if (!this.assignees || !isAssigneesLengthSame) {
         this.assignees =
-          SidebarMediator.singleton?.store?.assignees?.map(assignee => assignee.username) || [];
+          SidebarMediator.singleton?.store?.assignees?.map((assignee) => assignee.username) || [];
       }
     },
     filterValues(type) {
@@ -76,10 +77,18 @@ export default {
       return (inputText, processValues) => {
         if (this.cache[type]) {
           processValues(this.filterValues(type));
+        } else if (type === GfmAutocompleteType.Emojis) {
+          Emoji.initEmojiMap()
+            .then(() => {
+              const emojis = Emoji.getValidEmojiNames();
+              this.cache[type] = emojis;
+              processValues(emojis);
+            })
+            .catch(() => createFlash({ message: this.$options.errorMessage }));
         } else if (this.dataSources[type]) {
           axios
             .get(this.dataSources[type])
-            .then(response => {
+            .then((response) => {
               this.cache[type] = response.data;
               processValues(this.filterValues(type));
             })