From 24f026c8957a381b6cfc9fa759d0379420d8b149 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 2 Feb 2023 23:49:36 +0100
Subject: [PATCH] FIX: correctly filters input with pre-filled value (#20154)

Before this fix we would fill the input but that wouldn't trigger the actual filtering.
---
 .../discourse/components/chat-emoji-picker.hbs        |  5 ++++-
 .../discourse/components/chat-emoji-picker.js         | 11 +++--------
 plugins/chat/spec/system/chat_composer_spec.rb        | 10 ++++++++++
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
index 70fe2c5b466..e274c58f932 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
@@ -14,11 +14,14 @@
     <DcFilterInput
       @class="chat-emoji-picker__filter"
       @value={{this.chatEmojiPickerManager.initialFilter}}
-      @filterAction={{this.didInputFilter}}
+      @filterAction={{action this.didInputFilter value="target.value"}}
       @icons={{hash left="search"}}
       placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
       autofocus={{true}}
       {{did-insert this.focusFilter}}
+      {{did-insert
+        (fn this.didInputFilter this.chatEmojiPickerManager.initialFilter)
+      }}
     >
       <div
         class="chat-emoji-picker__fitzpatrick-scale"
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
index 8cf3ef88eed..97ac5cd5b67 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
@@ -195,18 +195,13 @@ export default class ChatEmojiPicker extends Component {
   }
 
   @action
-  didInputFilter(event) {
-    if (!event.target.value.length) {
+  didInputFilter(value) {
+    if (!value?.length) {
       this.filteredEmojis = null;
       return;
     }
 
-    discourseDebounce(
-      this,
-      this.debouncedDidInputFilter,
-      event.target.value,
-      INPUT_DELAY
-    );
+    discourseDebounce(this, this.debouncedDidInputFilter, value, INPUT_DELAY);
   }
 
   @action
diff --git a/plugins/chat/spec/system/chat_composer_spec.rb b/plugins/chat/spec/system/chat_composer_spec.rb
index 6ca2fb7ca6a..105d0cf4c4b 100644
--- a/plugins/chat/spec/system/chat_composer_spec.rb
+++ b/plugins/chat/spec/system/chat_composer_spec.rb
@@ -108,6 +108,16 @@ RSpec.describe "Chat composer", type: :system, js: true do
 
       expect(find(".chat-emoji-picker .dc-filter-input").value).to eq("gri")
     end
+
+    it "filters with the prefilled input" do
+      chat.visit_channel(channel_1)
+      find(".chat-composer-input").fill_in(with: ":fr")
+
+      click_link(I18n.t("js.composer.more_emoji"))
+
+      expect(page).to have_selector(".chat-emoji-picker [data-emoji='fr']")
+      expect(page).to have_no_selector(".chat-emoji-picker [data-emoji='grinning']")
+    end
   end
 
   context "when typing on keyboard" do