FIX: Setting emoji filter from initial autocomplete (#16063)

…has regressed at some point

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -11,7 +11,7 @@ import discourseComputed, {
 } from "discourse-common/utils/decorators";
 import { emojiSearch, isSkinTonableEmoji } from "pretty-text/emoji";
 import { emojiUrlFor, generateCookFunction } from "discourse/lib/text";
-import { later, schedule, scheduleOnce } from "@ember/runloop";
+import { schedule, scheduleOnce } from "@ember/runloop";
 import Component from "@ember/component";
 import I18n from "I18n";
 import ItsATrap from "@discourse/itsatrap";
@@ -221,6 +221,7 @@ export default Component.extend(TextareaTextManipulation, {
   _itsatrap: null,
   showLink: true,
   emojiPickerIsActive: false,
+  emojiFilter: "",
   emojiStore: service("emoji-store"),
   isEditorFocused: false,
   processPreview: true,
@@ -514,17 +515,7 @@ export default Component.extend(TextareaTextManipulation, {
         } else {
           $textarea.autocomplete({ cancel: true });
           this.set("emojiPickerIsActive", true);
-
-          schedule("afterRender", () => {
-            const filterInput = document.querySelector(
-              ".emoji-picker input[name='filter']"
-            );
-            if (filterInput) {
-              filterInput.value = v.term;
-
-              later(() => filterInput.dispatchEvent(new Event("input")), 50);
-            }
-          });
+          this.set("emojiFilter", v.term);
 
           return "";
         }

app/assets/javascripts/discourse/app/components/emoji-picker.js

@@ -38,6 +38,7 @@ export default Component.extend({
   isActive: false,
   isLoading: true,
   usePopper: true,
+  initialFilter: "",
 
   init() {
     this._super(...arguments);
@@ -82,6 +83,7 @@ export default Component.extend({
     this.set("recentEmojis", this.emojiStore.favorites);
 
     schedule("afterRender", () => {
+      this._applyFilter(this.initialFilter);
       document.addEventListener("click", this.handleOutsideClick);
 
       const emojiPicker = document.querySelector(".emoji-picker");
@@ -245,13 +247,17 @@ export default Component.extend({
   },
 
   @action
-  onFilter(event) {
+  onFilterChange(event) {
+    this._applyFilter(event.target.value);
+  },
+
+  _applyFilter(filter) {
     const emojiPicker = document.querySelector(".emoji-picker");
     const results = document.querySelector(".emoji-picker-emoji-area .results");
     results.innerHTML = "";
 
-    if (event.target.value) {
-      results.innerHTML = emojiSearch(event.target.value.toLowerCase(), {
+    if (filter) {
+      results.innerHTML = emojiSearch(filter.toLowerCase(), {
         maxResults: 20,
         diversity: this.emojiStore.diversity,
       })

app/assets/javascripts/discourse/app/templates/components/d-editor.hbs

@@ -72,6 +72,7 @@
 {{emoji-picker
   isActive=emojiPickerIsActive
   isEditorFocused=isEditorFocused
+  initialFilter=this.emojiFilter
   emojiSelected=(action "emojiSelected")
   onEmojiPickerClose=(action (mut emojiPickerIsActive) false)
 }}

app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs

@@ -1,6 +1,6 @@
 {{#if isActive}}
   {{!-- template-lint-disable no-invalid-interactive --}}
-  <div {{on "keydown" (action "keydown")}} class="emoji-picker {{if @isActive "opened"}}">
+  <div {{on "keydown" (action "keydown")}} class="emoji-picker {{if this.isActive "opened"}}">
     {{!-- template-lint-enable no-invalid-interactive --}}
     <div class="emoji-picker-category-buttons">
       {{#if recentEmojis.length}}
@@ -23,12 +23,13 @@
         {{input
           class="filter"
           name="filter"
+          value=@initialFilter
           placeholder=(i18n "emoji_picker.filter_placeholder")
           autocomplete="off"
           type="search"
           autocorrect="off"
           autocapitalize="off"
-          input=(action "onFilter")
+          input=(action "onFilterChange")
         }}
 
         {{d-icon "search"}}