Display default status emoji if only message is entered

1 files changed, 28 insertions, 4 deletions

diff --git a/app/assets/javascripts/pages/profiles/show/index.js b/app/assets/javascripts/pages/profiles/show/index.js
index 949219a0837..aea7b649c20 100644
--- a/app/assets/javascripts/pages/profiles/show/index.js
+++ b/app/assets/javascripts/pages/profiles/show/index.js
@@ -3,15 +3,22 @@ import createFlash from '~/flash';
 import GfmAutoComplete from '~/gfm_auto_complete';
 import EmojiMenu from './emoji_menu';
 
+const defaultStatusEmoji = 'speech_balloon';
+
 document.addEventListener('DOMContentLoaded', () => {
   const toggleEmojiMenuButtonSelector = '.js-toggle-emoji-menu';
   const toggleEmojiMenuButton = document.querySelector(toggleEmojiMenuButtonSelector);
   const statusEmojiField = document.getElementById('js-status-emoji-field');
   const statusMessageField = document.getElementById('js-status-message-field');
-  const findNoEmojiPlaceholder = () => document.getElementById('js-no-emoji-placeholder');
 
+  const toggleNoEmojiPlaceholder = (isVisible) => {
+    const placeholderElement = document.getElementById('js-no-emoji-placeholder');
+    placeholderElement.classList.toggle('hidden', !isVisible);
+  };
+
+  const findStatusEmoji = () => toggleEmojiMenuButton.querySelector('gl-emoji');
   const removeStatusEmoji = () => {
-    const statusEmoji = toggleEmojiMenuButton.querySelector('gl-emoji');
+    const statusEmoji = findStatusEmoji();
     if (statusEmoji) {
       statusEmoji.remove();
     }
@@ -19,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const selectEmojiCallback = (emoji, emojiTag) => {
     statusEmojiField.value = emoji;
-    findNoEmojiPlaceholder().classList.add('hidden');
+    toggleNoEmojiPlaceholder(false);
     removeStatusEmoji();
     toggleEmojiMenuButton.innerHTML += emojiTag;
   };
@@ -29,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
     statusEmojiField.value = '';
     statusMessageField.value = '';
     removeStatusEmoji();
-    findNoEmojiPlaceholder().classList.remove('hidden');
+    toggleNoEmojiPlaceholder(true);
   });
 
   const emojiAutocomplete = new GfmAutoComplete();
@@ -44,6 +51,23 @@ document.addEventListener('DOMContentLoaded', () => {
         selectEmojiCallback,
       );
       emojiMenu.bindEvents();
+
+      const defaultEmojiTag = Emoji.glEmojiTag(defaultStatusEmoji);
+      statusMessageField.addEventListener('input', () => {
+        const hasStatusMessage = statusMessageField.value.trim() !== '';
+        const statusEmoji = findStatusEmoji();
+        if (hasStatusMessage && statusEmoji) {
+          return;
+        }
+
+        if (hasStatusMessage) {
+          toggleNoEmojiPlaceholder(false);
+          toggleEmojiMenuButton.innerHTML += defaultEmojiTag;
+        } else if (statusEmoji.dataset.name === defaultStatusEmoji) {
+          toggleNoEmojiPlaceholder(true);
+          removeStatusEmoji();
+        }
+      });
     })
     .catch(() => createFlash('Failed to load emoji list!'));
 });