From 1a5c6f763233fa4bfaa2d41f355b4c76a3a03c88 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 28 Feb 2022 15:01:26 +0100
Subject: [PATCH] FIX: Setting emoji filter from initial autocomplete (#16063)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…has regressed at some point
---
 .../discourse/app/components/d-editor.js          | 15 +++------------
 .../discourse/app/components/emoji-picker.js      | 12 +++++++++---
 .../app/templates/components/d-editor.hbs         |  1 +
 .../app/templates/components/emoji-picker.hbs     |  5 +++--
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index 81dddeda768..8e86af03e4c 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/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 "";
         }
diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index e56a9bc601f..0d194c6bcdd 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/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,
       })
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
index c1be4f69785..a8bad744e3f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-editor.hbs
+++ b/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)
 }}
diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
index 6de3a63fd31..c64d59e4853 100644
--- a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
+++ b/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"}}