Get selection via up/down arrow to work

spec/autocomplete.js

@@ -77,7 +77,7 @@
                     });
                 _converse.connection._dataRecv(test_utils.createRequest(presence));
 
-                textarea.value = "hello s";
+                textarea.value = "hello s s";
                 view.keyPressed(tab_event);
                 view.keyUp(tab_event);
                 expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
@@ -91,7 +91,17 @@
                 }
                 view.keyPressed(up_arrow_event);
                 view.keyUp(up_arrow_event);
+                expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(2);
+                expect(view.el.querySelector('.suggestion-box__results li[aria-selected="false"]').textContent).toBe('some1');
+                expect(view.el.querySelector('.suggestion-box__results li[aria-selected="true"]').textContent).toBe('some2');
 
+                view.keyPressed({
+                    'target': textarea,
+                    'preventDefault': _.noop,
+                    'stopPropagation': _.noop,
+                    'keyCode': 13
+                });
+                expect(textarea.value).toBe('hello s some2');
                 done();
             }).catch(_.partial(console.error, _));
         }));

src/converse-autocomplete.js

@@ -34,8 +34,6 @@
                 return a < b? -1 : 1;
             };
 
-            const REPLACE = (text) => (this.input.value = text.value);
-
             const ITEM = (text, input) => {
                 input = input.trim();
                 const element = document.createElement("li");
@@ -83,8 +81,7 @@
                         'data': _.identity,
                         'filter': _converse.FILTER_CONTAINS,
                         'sort': config.sort === false ? false : SORT_BYLENGTH,
-                        'item': ITEM,
-                        'replace': REPLACE
+                        'item': ITEM
                     }, config);
 
                     this.index = -1;
@@ -177,7 +174,16 @@
                     this.is_opened = false;
                     this.index = -1;
 
-                    helpers.fire(this.input, "suggestion-box-close", o || {});
+                    this.trigger("suggestion-box-close", o || {});
+                }
+
+                insertValue (suggestion) {
+                    let value;
+                    if (this.match_current_word) {
+                        u.replaceCurrentWord(this.input, suggestion.value);
+                    } else {
+                        this.input.value = suggestion.value;
+                    }
                 }
 
                 open () {
@@ -251,7 +257,7 @@
                             });
 
                         if (allowed) {
-                            this.replace(suggestion);
+                            this.insertValue(suggestion);
                             this.close({'reason': 'select'});
                             this.auto_completing = false;
                             this.trigger("suggestion-box-selectcomplete", {'text': suggestion});
@@ -264,6 +270,7 @@
                         if (ev.keyCode === _converse.keycodes.ENTER && this.selected) {
                             ev.preventDefault();
                             ev.stopPropagation();
+                            this.select();
                             return false;
                         } else if (ev.keyCode === _converse.keycodes.ESCAPE) {
                             this.close({'reason': 'esc'});
@@ -306,7 +313,6 @@
                     }
 
                     const list = typeof this._list === "function" ? this._list() : this._list;
-
                     if (value.length >= this.min_chars && list.length > 0) {
                         this.index = -1;
                         // Populate list with options that match

src/converse-muc-views.js

@@ -618,7 +618,7 @@
                         'min_chars': 1,
                         'match_current_word': true,
                         'match_on_tab': true,
-                        'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': o.get('jid')})),
+                        'list': () => this.model.occupants.map(o => ({'label': o.get('nick'), 'value': o.get('nick')})),
                         'filter': _converse.FILTER_STARTSWITH
                     });
                     this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));

src/utils/core.js

@@ -821,6 +821,13 @@
         return _.last(input.value.slice(0, cursor).split(' '));
     };
 
+    u.replaceCurrentWord = function (input, new_value) {
+        const cursor = input.selectionEnd || undefined,
+              current_word = _.last(input.value.slice(0, cursor).split(' ')),
+              value = input.value;
+        input.value = value.slice(0, cursor - current_word.length) + new_value + value.slice(cursor);
+    };
+
     u.isVisible = function (el) {
         if (u.hasClass('hidden', el)) {
             return false;