Avoid interference between username and emoji autocomplete

spec/emojis.js

@@ -60,7 +60,7 @@
                 }
                 view.onKeyDown(tab_event);
                 await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
-                const picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
+                let picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
                 const input = picker.querySelector('.emoji-search');
                 expect(input.value).toBe(':gri');
                 let visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
@@ -81,6 +81,28 @@
                 view.emoji_picker_view.onKeyDown(enter_event);
                 expect(input.value).toBe('');
                 expect(textarea.value).toBe(':grimacing: ');
+
+                // Test that username starting with : doesn't cause issues
+                const presence = $pres({
+                        'from': `${muc_jid}/:username`,
+                        'id': '27C55F89-1C6A-459A-9EB5-77690145D624',
+                        'to': _converse.jid
+                    })
+                    .c('x', { 'xmlns': 'http://jabber.org/protocol/muc#user'})
+                        .c('item', {
+                            'jid': 'some1@montague.lit',
+                            'affiliation': 'member',
+                            'role': 'participant'
+                        });
+                _converse.connection._dataRecv(test_utils.createRequest(presence));
+
+                textarea.value = ':use';
+                view.onKeyDown(tab_event);
+                await u.waitUntil(() => u.isVisible(view.el.querySelector('.toggle-smiley .emoji-picker__container')));
+                picker = await u.waitUntil(() => view.el.querySelector('.toggle-smiley .emoji-picker__container'));
+                expect(input.value).toBe(':use');
+                visible_emojis = sizzle('.insert-emoji:not(.hidden)', picker);
+                expect(visible_emojis.length).toBe(0);
                 done();
             }));
 

src/converse-chatview.js

@@ -883,8 +883,6 @@ converse.plugins.add('converse-chatview', {
                     if (ev.keyCode === _converse.keycodes.FORWARD_SLASH) {
                         // Forward slash is used to run commands. Nothing to do here.
                         return;
-                    } else if (ev.keyCode === _converse.keycodes.TAB) {
-                        return this.onTabPressed(ev);
                     } else if (ev.keyCode === _converse.keycodes.ESCAPE) {
                         return this.onEscapePressed(ev);
                     } else if (ev.keyCode === _converse.keycodes.ENTER) {
@@ -924,8 +922,6 @@ converse.plugins.add('converse-chatview', {
                 return this.onFormSubmitted(ev);
             },
 
-            onTabPressed (ev) {}, // noop, overridden in other plugins
-
             onEscapePressed (ev) {
                 ev.preventDefault();
                 const idx = this.model.messages.findLastIndex('correcting'),

src/converse-emoji-views.js

@@ -42,28 +42,6 @@ converse.plugins.add('converse-emoji-views', {
                     this.emoji_dropdown.toggle();
                 }
                 this.__super__.onEnterPressed.apply(this, arguments);
-            },
-
-            async onTabPressed (ev) {
-                const { _converse } = this.__super__;
-                const input = ev.target;
-                const value = u.getCurrentWord(input, null, /(:.*?:)/g);
-                if (value.startsWith(':')) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    if (this.emoji_dropdown === undefined) {
-                        this.createEmojiDropdown();
-                    }
-                    await _converse.api.waitUntil('emojisInitialized');
-                    this.emoji_picker_view.model.set({
-                        'autocompleting': value,
-                        'position': ev.target.selectionStart
-                    }, {'silent': true});
-                    this.emoji_picker_view.filter(value, true);
-                    this.emoji_dropdown.toggle();
-                } else {
-                    this.__super__.onTabPressed.apply(this, arguments);
-                }
             }
         },
 
@@ -71,6 +49,19 @@ converse.plugins.add('converse-emoji-views', {
             events: {
                 'click .toggle-smiley': 'toggleEmojiMenu'
             },
+
+            onKeyDown (ev) {
+                const { _converse } = this.__super__;
+                if (ev.keyCode === _converse.keycodes.TAB) {
+                    const value = u.getCurrentWord(ev.target, null, /(:.*?:)/g);
+                    if (value.startsWith(':')) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        return this.autocompleteInPicker(ev.target, value);
+                    }
+                }
+                return this.__super__.onKeyDown.call(this, ev);
+            }
         }
     },
 
@@ -92,6 +83,19 @@ converse.plugins.add('converse-emoji-views', {
 
         const emoji_aware_chat_view = {
 
+            async autocompleteInPicker (input, value) {
+                if (this.emoji_dropdown === undefined) {
+                    this.createEmojiDropdown();
+                }
+                await _converse.api.waitUntil('emojisInitialized');
+                this.emoji_picker_view.model.set({
+                    'autocompleting': value,
+                    'position': input.selectionStart
+                }, {'silent': true});
+                this.emoji_picker_view.filter(value, true);
+                this.emoji_dropdown.toggle();
+            },
+
             createEmojiPicker () {
                 if (!_converse.emojipicker) {
                     const storage = _converse.config.get('storage'),