Let converse-autocomplete also be triggered with backspace

dist/converse.js

@@ -48005,7 +48005,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
           'ac_triggers': [],
           // Array of keys (`ev.key`) values that will trigger auto-complete
           'include_triggers': [],
-          // Array of trigger keycodes which should be included in the returned value
+          // Array of trigger keys which should be included in the returned value
           'min_chars': 2,
           'max_items': 10,
           'auto_evaluate': true,
@@ -48248,6 +48248,12 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
           }
 
           this.auto_completing = true;
+        } else if (ev.key === "Backspace") {
+          const word = u.getCurrentWord(ev.target, ev.target.selectionEnd - 1);
+
+          if (this.ac_triggers.includes(word[0])) {
+            this.auto_completing = true;
+          }
         }
       }
 
@@ -53920,7 +53926,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
         'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
         'click .toggle-smiley': 'toggleEmojiMenu',
         'click .upload-file': 'toggleFileUpload',
-        'keypress .chat-textarea': 'keyPressed',
+        'keydown .chat-textarea': 'keyPressed',
         'keyup .chat-textarea': 'keyUp',
         'input .chat-textarea': 'inputChanged'
       },
@@ -70419,9 +70425,12 @@ u.siblingIndex = function (el) {
   return i;
 };
 
-u.getCurrentWord = function (input) {
-  const cursor = input.selectionEnd || undefined;
-  return _lodash_noconflict__WEBPACK_IMPORTED_MODULE_3___default.a.last(input.value.slice(0, cursor).split(' '));
+u.getCurrentWord = function (input, index) {
+  if (!index) {
+    index = input.selectionEnd || undefined;
+  }
+
+  return _lodash_noconflict__WEBPACK_IMPORTED_MODULE_3___default.a.last(input.value.slice(0, index).split(' '));
 };
 
 u.replaceCurrentWord = function (input, new_value) {

spec/autocomplete.js

@@ -168,5 +168,46 @@
             expect(textarea.value).toBe('hello @z3r0 ');
             done();
         }));
+
+        it("autocompletes when the user presses backspace",
+            mock.initConverse(
+                null, ['rosterGroupsFetched'], {},
+                    async function (done, _converse) {
+
+            await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy');
+            const view = _converse.chatboxviews.get('lounge@localhost');
+            expect(view.model.occupants.length).toBe(1);
+            const presence = $pres({
+                    'to': 'dummy@localhost/resource',
+                    'from': 'lounge@localhost/some1'
+                })
+                .c('x', {xmlns: Strophe.NS.MUC_USER})
+                .c('item', {
+                    'affiliation': 'none',
+                    'jid': 'some1@localhost/resource',
+                    'role': 'participant'
+                });
+            _converse.connection._dataRecv(test_utils.createRequest(presence));
+            expect(view.model.occupants.length).toBe(2);
+
+            const textarea = view.el.querySelector('textarea.chat-textarea');
+            textarea.value = "hello @some1 ";
+
+            // Press backspace
+            const backspace_event = {
+                'target': textarea,
+                'preventDefault': _.noop,
+                'stopPropagation': _.noop,
+                'keyCode': 8,
+                'key': 'Backspace'
+            }
+            view.keyPressed(backspace_event);
+            textarea.value = "hello @some1"; // Mimic backspace
+            view.keyUp(backspace_event);
+            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(1);
+            expect(view.el.querySelector('.suggestion-box__results li').textContent).toBe('some1');
+            done();
+        }));
     });
 }));

src/converse-autocomplete.js

@@ -73,7 +73,7 @@ converse.plugins.add("converse-autocomplete", {
                 _.assignIn(this, {
                     'match_current_word': false, // Match only the current word, otherwise all input is matched
                     'ac_triggers': [], // Array of keys (`ev.key`) values that will trigger auto-complete
-                    'include_triggers': [], // Array of trigger keycodes which should be included in the returned value
+                    'include_triggers': [], // Array of trigger keys which should be included in the returned value
                     'min_chars': 2,
                     'max_items': 10,
                     'auto_evaluate': true,
@@ -296,6 +296,11 @@ converse.plugins.add("converse-autocomplete", {
                         ev.preventDefault();
                     }
                     this.auto_completing = true;
+                } else if (ev.key === "Backspace") {
+                    const word = u.getCurrentWord(ev.target, ev.target.selectionEnd-1);
+                    if (this.ac_triggers.includes(word[0])) {
+                        this.auto_completing = true;
+                    }
                 }
             }
 

src/converse-muc-views.js

@@ -504,7 +504,7 @@ converse.plugins.add('converse-muc-views', {
                 'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
                 'click .toggle-smiley': 'toggleEmojiMenu',
                 'click .upload-file': 'toggleFileUpload',
-                'keypress .chat-textarea': 'keyPressed',
+                'keydown .chat-textarea': 'keyPressed',
                 'keyup .chat-textarea': 'keyUp',
                 'input .chat-textarea': 'inputChanged'
             },

src/headless/utils/core.js

@@ -332,9 +332,11 @@ u.siblingIndex = function (el) {
     return i;
 };
 
-u.getCurrentWord = function (input) {
-    const cursor = input.selectionEnd || undefined;
-    return _.last(input.value.slice(0, cursor).split(' '));
+u.getCurrentWord = function (input, index) {
+    if (!index) {
+        index = input.selectionEnd || undefined;
+    }
+    return _.last(input.value.slice(0, index).split(' '));
 };
 
 u.replaceCurrentWord = function (input, new_value) {