From 6325e641d8c4e813cd2a126fbcd19e7e13518102 Mon Sep 17 00:00:00 2001 From: Jan Cernik <66427541+jancernik@users.noreply.github.com> Date: Thu, 2 Feb 2023 15:04:52 -0300 Subject: [PATCH] =?UTF-8?q?FIX:=20Emoji=20autocomplete=20=E2=80=9Cmore?= =?UTF-8?q?=E2=80=9D=20button=20not=20working=20in=20chat=20(#20113)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../discourse/components/chat-composer.js | 4 +++- .../components/chat-emoji-picker.hbs | 1 + .../discourse/components/chat-message.js | 8 +++---- .../discourse/components/dc-filter-input.hbs | 1 + .../services/chat-emoji-picker-manager.js | 24 ++++++++++++------- .../chat/spec/system/chat_composer_spec.rb | 16 +++++++++++++ .../chat-emoji-picker-manager-test.js | 12 ++++++++-- 7 files changed, 51 insertions(+), 15 deletions(-) diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js index 932ca8f84f3..88f02c986af 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js +++ b/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 ""; } }, 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 4b6273b5aa3..70fe2c5b466 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs @@ -13,6 +13,7 @@
{ this._popper = createPopper(trigger, this.element, { placement: "top", @@ -112,7 +120,8 @@ export default class ChatEmojiPickerManager extends Service { } } - startFromComposer(callback) { + startFromComposer(callback, options = { filter: null }) { + this.initialFilter = options.filter; this.context = "chat-composer"; this.element = document.querySelector(".chat-composer-emoji-picker-anchor"); this.open(callback); @@ -140,7 +149,6 @@ export default class ChatEmojiPickerManager extends Service { .then((emojis) => { this.emojis = emojis; }) - .catch(popupAjaxError) .finally(() => { this.loading = false; diff --git a/plugins/chat/spec/system/chat_composer_spec.rb b/plugins/chat/spec/system/chat_composer_spec.rb index 28b1016ea23..6ca2fb7ca6a 100644 --- a/plugins/chat/spec/system/chat_composer_spec.rb +++ b/plugins/chat/spec/system/chat_composer_spec.rb @@ -94,6 +94,22 @@ RSpec.describe "Chat composer", type: :system, js: true do end end + context "when opening emoji picker through more button of the autocomplete" do + before do + channel_1.add(current_user) + sign_in(current_user) + end + + it "prefills the emoji picker filter input" do + chat.visit_channel(channel_1) + find(".chat-composer-input").fill_in(with: ":gri") + + click_link(I18n.t("js.composer.more_emoji")) + + expect(find(".chat-emoji-picker .dc-filter-input").value).to eq("gri") + end + end + context "when typing on keyboard" do before do channel_1.add(current_user) diff --git a/plugins/chat/test/javascripts/unit/services/chat-emoji-picker-manager-test.js b/plugins/chat/test/javascripts/unit/services/chat-emoji-picker-manager-test.js index 052a31a683d..cb86fedae3b 100644 --- a/plugins/chat/test/javascripts/unit/services/chat-emoji-picker-manager-test.js +++ b/plugins/chat/test/javascripts/unit/services/chat-emoji-picker-manager-test.js @@ -24,7 +24,7 @@ module( test("startFromMessageReactionList", async function (assert) { const callback = () => {}; - this.manager.startFromMessageReactionList({ id: 1 }, false, callback); + this.manager.startFromMessageReactionList({ id: 1 }, callback); assert.ok(this.manager.loading); assert.ok(this.manager.opened); @@ -44,7 +44,7 @@ module( test("startFromMessageActions", async function (assert) { const callback = () => {}; - this.manager.startFromMessageReactionList({ id: 1 }, false, callback); + this.manager.startFromMessageReactionList({ id: 1 }, callback); assert.ok(this.manager.loading); assert.ok(this.manager.opened); @@ -104,6 +104,14 @@ module( assert.strictEqual(this.manager.loading, false); }); + test("startFromComposer with filter option", async function (assert) { + const callback = () => {}; + this.manager.startFromComposer(callback, { filter: "foofilter" }); + await settled(); + + assert.strictEqual(this.manager.initialFilter, "foofilter"); + }); + test("closeExisting", async function (assert) { const callback = () => { return;