From eb58623b112387c8ac9bd6eb24686bd6a3778625 Mon Sep 17 00:00:00 2001
From: Renato Atilio <renato@discourse.org>
Date: Thu, 2 Jan 2025 12:29:18 -0300
Subject: [PATCH] UX: replace partially written emoji when using picker on chat
 (#30517)

After searching for an emoji through the autocomplete, when a user uses the emoji picker (to see the full list of emojis) and selects one, the content in the chat composer would contain both the partially written emoji and the full :selected_emoji: code.

The actual fix is just re-using the emojiSelected method from TextManipulation.
---
 .../javascripts/discourse/components/chat-composer.js  |  2 +-
 .../javascripts/discourse/lib/textarea-interactor.js   |  4 ++++
 plugins/chat/spec/system/chat_composer_spec.rb         | 10 ++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
index 6fb08faee38..5dcc8ca5afa 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
@@ -377,7 +377,7 @@ export default class ChatComposer extends Component {
   onSelectEmoji(emoji) {
     const code = `:${emoji}:`;
     this.chatEmojiReactionStore.track(code);
-    this.composer.textarea.addText(this.composer.textarea.getSelected(), code);
+    this.composer.textarea.emojiSelected(emoji);
 
     if (this.site.desktopView) {
       this.composer.focus();
diff --git a/plugins/chat/assets/javascripts/discourse/lib/textarea-interactor.js b/plugins/chat/assets/javascripts/discourse/lib/textarea-interactor.js
index 1d4c98b7267..4e7971bb90a 100644
--- a/plugins/chat/assets/javascripts/discourse/lib/textarea-interactor.js
+++ b/plugins/chat/assets/javascripts/discourse/lib/textarea-interactor.js
@@ -116,4 +116,8 @@ export default class TextareaInteractor extends EmberObject {
   isInside() {
     return this.textManipulation.isInside(...arguments);
   }
+
+  emojiSelected(code) {
+    this.textManipulation.emojiSelected(code);
+  }
 }
diff --git a/plugins/chat/spec/system/chat_composer_spec.rb b/plugins/chat/spec/system/chat_composer_spec.rb
index 67a99f7b0c1..fa6a9d85e51 100644
--- a/plugins/chat/spec/system/chat_composer_spec.rb
+++ b/plugins/chat/spec/system/chat_composer_spec.rb
@@ -76,6 +76,16 @@ RSpec.describe "Chat composer", type: :system do
       expect(page).to have_selector(".chat-emoji-picker [data-emoji='fr']")
       expect(page).to have_no_selector(".chat-emoji-picker [data-emoji='grinning']")
     end
+
+    it "replaces the partially typed emoji with the selected" do
+      chat_page.visit_channel(channel_1)
+      find(".chat-composer__input").fill_in(with: "hey :gri")
+
+      click_link(I18n.t("js.composer.more_emoji"))
+      find("[data-emoji='grimacing']").click(wait: 0.5)
+
+      expect(channel_page.composer.value).to eq("hey :grimacing:")
+    end
   end
 
   context "when typing on keyboard" do