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.

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"

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js

@@ -195,18 +195,13 @@ export default class ChatEmojiPicker extends Component {
   }
 
   @action
-  didInputFilter(event) {
+  didInputFilter(value) {
-    if (!event.target.value.length) {
+    if (!value?.length) {
       this.filteredEmojis = null;
       return;
     }
 
-    discourseDebounce(
+    discourseDebounce(this, this.debouncedDidInputFilter, value, INPUT_DELAY);
-      this,
-      this.debouncedDidInputFilter,
-      event.target.value,
-      INPUT_DELAY
-    );
   }
 
   @action

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