diff --git a/spec/emojis.js b/spec/emojis.js index 31cd70ed6..703478fc1 100644 --- a/spec/emojis.js +++ b/spec/emojis.js @@ -74,7 +74,7 @@ describe("Emojis", function () { input.dispatchEvent(new KeyboardEvent('keydown', enter_event)); await u.waitUntil(() => input.value === ''); - await u.waitUntil(() => textarea.value === ':grimacing:'); + await u.waitUntil(() => textarea.value === ':grimacing: '); // Test that username starting with : doesn't cause issues const presence = $pres({ @@ -99,6 +99,56 @@ describe("Emojis", function () { done(); })); + it("is focused to autocomplete emojis in the textarea", + mock.initConverse( + ['rosterGroupsFetched', 'chatBoxesFetched'], {}, + async function (done, _converse) { + + const muc_jid = 'lounge@montague.lit'; + await mock.openAndEnterChatRoom(_converse, muc_jid, 'romeo'); + const view = _converse.chatboxviews.get(muc_jid); + + const textarea = view.el.querySelector('textarea.chat-textarea'); + textarea.value = ':'; + // Press tab + const tab_event = { + 'target': textarea, + 'preventDefault': function preventDefault () {}, + 'stopPropagation': function stopPropagation () {}, + 'keyCode': 9, + 'key': 'Tab' + } + view.onKeyDown(tab_event); + await u.waitUntil(() => u.isVisible(view.el.querySelector('.emoji-picker__lists'))); + + const picker = view.el.querySelector('converse-emoji-picker'); + const input = picker.querySelector('.emoji-search'); + expect(input.value).toBe(':'); + input.value = ':gri'; + const event = { + 'target': input, + 'preventDefault': function preventDefault () {}, + 'stopPropagation': function stopPropagation () {} + }; + input.dispatchEvent(new KeyboardEvent('keydown', event)); + await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji', view.el).length === 3, 1000); + let emoji = sizzle('.emojis-lists__container--search .insert-emoji:not(.hidden) a', view.el).pop(); + emoji.click(); + await u.waitUntil(() => textarea.value === ':grinning: '); + textarea.value = ':grinning: :'; + view.onKeyDown(tab_event); + + await u.waitUntil(() => input.value === ':'); + input.value = ':grimacing'; + input.dispatchEvent(new KeyboardEvent('keydown', event)); + await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji', view.el).length === 1, 1000); + emoji = sizzle('.emojis-lists__container--search .insert-emoji:not(.hidden) a', view.el).pop(); + emoji.click(); + await u.waitUntil(() => textarea.value === ':grinning: :grimacing: '); + done(); + })); + + it("properly inserts emojis into the chat textarea", mock.initConverse( ['rosterGroupsFetched', 'chatBoxesFetched'], {}, @@ -128,7 +178,7 @@ describe("Emojis", function () { await u.waitUntil(() => input.value === ':100:'); const enter_event = Object.assign({}, tab_event, {'keyCode': 13, 'key': 'Enter', 'target': input}); input.dispatchEvent(new KeyboardEvent('keydown', enter_event)); - expect(textarea.value).toBe(':100:'); + expect(textarea.value).toBe(':100: '); textarea.value = ':'; view.onKeyDown(tab_event); @@ -138,7 +188,7 @@ describe("Emojis", function () { await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji:not(.hidden)', view.el).length === 1, 1000); const emoji = sizzle('.emojis-lists__container--search .insert-emoji:not(.hidden) a', view.el).pop(); emoji.click(); - expect(textarea.value).toBe(':100:'); + expect(textarea.value).toBe(':100: '); done(); })); diff --git a/src/converse-chatview.js b/src/converse-chatview.js index c1f47b70f..52af322bb 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -724,10 +724,10 @@ converse.plugins.add('converse-chatview', { if (emoji_picker && emoji_dropdown) { emoji_picker.model.set({ 'ac_position': input.selectionStart, - 'autocompleting': true, + 'autocompleting': value, 'query': value }); - emoji_dropdown.firstElementChild.click(); + emoji_dropdown.showMenu(); return true; } }, @@ -736,7 +736,7 @@ converse.plugins.add('converse-chatview', { const model = this.el.querySelector('converse-emoji-picker').model; const autocompleting = model.get('autocompleting'); const ac_position = model.get('ac_position'); - this.insertIntoTextArea(emoji, !!autocompleting, false, ac_position); + this.insertIntoTextArea(emoji, autocompleting, false, ac_position); }, /** diff --git a/src/converse-minimize.js b/src/converse-minimize.js index 07ab5018b..9b6e500ce 100644 --- a/src/converse-minimize.js +++ b/src/converse-minimize.js @@ -498,9 +498,7 @@ converse.plugins.add('converse-minimize', { }); function initMinimizedChats () { - if (_converse.minimized_chats) { - _converse.minimized_chats.remove(); - } + _converse.minimized_chats?.remove(); _converse.minimized_chats = new _converse.MinimizedChats({model: _converse.chatboxes}); /** * Triggered once the _converse.MinimizedChats instance has been initialized