FIX: Emoji autocomplete “more” button not working in chat (#20113)

* FIX: Emoji autocomplete “more” button not working

* Rely on setting an intial value on the filter input

This commit removes custom logic applied on initial filter and instead gives a param to use as value for the input, automatically triggering the existing filtering handler.

Other notes:
- Slightly changes the API to be able to set a filter and open the composer in one go
- Adds a very simple service spec
- Adds a system spec to fully validate the behavior

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

plugins/chat/assets/javascripts/discourse/components/chat-composer.js

@@ -464,7 +464,9 @@ export default Component.extend(TextareaTextManipulation, {
           return `${v.code}:`;
         } else {
           $textarea.autocomplete({ cancel: true });
-          this.set("emojiPickerIsActive", true);
+          this.chatEmojiPickerManager.startFromComposer(this.emojiSelected, {
+            filter: v.term,
+          });
           return "";
         }
       },

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

@@ -13,6 +13,7 @@
   <div class="chat-emoji-picker__filter-container">
     <DcFilterInput
       @class="chat-emoji-picker__filter"
+      @value={{this.chatEmojiPickerManager.initialFilter}}
       @filterAction={{this.didInputFilter}}
       @icons={{hash left="search"}}
       placeholder={{i18n "chat.emoji_picker.search_placeholder"}}

plugins/chat/assets/javascripts/discourse/components/chat-message.js

@@ -518,8 +518,8 @@ export default Component.extend({
   startReactionForMessageActions() {
     this.chatEmojiPickerManager.startFromMessageActions(
       this.message,
-      this.site.desktopView,
-      this.selectReaction
+      this.selectReaction,
+      { desktop: this.site.desktopView }
     );
   },
 
@@ -527,8 +527,8 @@ export default Component.extend({
   startReactionForReactionList() {
     this.chatEmojiPickerManager.startFromMessageReactionList(
       this.message,
-      this.site.desktopView,
-      this.selectReaction
+      this.selectReaction,
+      { desktop: this.site.desktopView }
     );
   },
 

plugins/chat/assets/javascripts/discourse/components/dc-filter-input.hbs

@@ -11,6 +11,7 @@
 
   <Input
     class="dc-filter-input"
+    @value={{@value}}
     {{on "input" (if @filterAction @filterAction (noop))}}
     {{on "focusin" (action (mut this.isFocused) true)}}
     {{on "focusout" (action (mut this.isFocused) false)}}