Use `ev.key` instead of `ev.keyCode`

Removes the need for maintaining a map of keycodes to keys

dist/converse.js

@@ -47944,9 +47944,6 @@ const _converse$env = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_
       _ = _converse$env._,
       Backbone = _converse$env.Backbone,
       u = _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].env.utils;
-const KEYCODES_MAP = {
-  '@': 50
-};
 _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins.add("converse-autocomplete", {
   initialize() {
     const _converse = this._converse;
@@ -48005,8 +48002,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
         _.assignIn(this, {
           'match_current_word': false,
           // Match only the current word, otherwise all input is matched
-          'trigger_keycodes': [],
-          // Array of keycodes that will trigger auto-complete
+          '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
           'min_chars': 2,
@@ -48245,8 +48242,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
           return;
         }
 
-        if (this.trigger_keycodes.includes(ev.keyCode)) {
-          if (ev.keyCode === _converse.keycodes.TAB) {
+        if (this.ac_triggers.includes(ev.key)) {
+          if (ev.key === "Tab") {
             ev.preventDefault();
           }
 
@@ -48270,7 +48267,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
         let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
         let ignore_min_chars = false;
 
-        if (this.trigger_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
+        if (this.ac_triggers.includes(value[0]) && !this.include_triggers.includes(ev.key)) {
           ignore_min_chars = true;
           value = value.slice('1');
         }
@@ -53923,7 +53920,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',
-        'keydown .chat-textarea': 'keyPressed',
+        'keypress .chat-textarea': 'keyPressed',
         'keyup .chat-textarea': 'keyUp',
         'input .chat-textarea': 'inputChanged'
       },
@@ -54022,7 +54019,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
             'value': `@${o.getDisplayName()}`
           })),
           'filter': _converse.FILTER_STARTSWITH,
-          'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
+          'ac_triggers': ["Tab", "@"],
           'include_triggers': []
         });
         this.auto_complete.on('suggestion-box-selectcomplete', () => this.auto_completing = false);
@@ -55363,9 +55360,6 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
         const show = this.model.get('show');
         return templates_occupant_html__WEBPACK_IMPORTED_MODULE_20___default()(_.extend({
           '_': _,
-          // XXX Normally this should already be included,
-          // but with the current webpack build,
-          // we only get a subset of the _ methods.
           'jid': '',
           'show': show,
           'hint_show': _converse.PRETTY_CHAT_STATUS[show],

spec/autocomplete.js

@@ -18,45 +18,44 @@
         it("shows all autocompletion options when the user presses @",
             mock.initConverse(
                 null, ['rosterGroupsFetched'], {},
-                    function (done, _converse) {
-
-            test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom')
-            .then(() => {
-                const view = _converse.chatboxviews.get('lounge@localhost');
-
-                ['dick', 'harry'].forEach((nick) => {
-                    _converse.connection._dataRecv(test_utils.createRequest(
-                        $pres({
-                            'to': 'tom@localhost/resource',
-                            'from': `lounge@localhost/${nick}`
-                        })
-                        .c('x', {xmlns: Strophe.NS.MUC_USER})
-                        .c('item', {
-                            'affiliation': 'none',
-                            'jid': `${nick}@localhost/resource`,
-                            'role': 'participant'
-                        })));
-                });
+                    async function (done, _converse) {
+
+            await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'tom');
+            const view = _converse.chatboxviews.get('lounge@localhost');
+
+            ['dick', 'harry'].forEach((nick) => {
+                _converse.connection._dataRecv(test_utils.createRequest(
+                    $pres({
+                        'to': 'tom@localhost/resource',
+                        'from': `lounge@localhost/${nick}`
+                    })
+                    .c('x', {xmlns: Strophe.NS.MUC_USER})
+                    .c('item', {
+                        'affiliation': 'none',
+                        'jid': `${nick}@localhost/resource`,
+                        'role': 'participant'
+                    })));
+            });
 
-                // Test that pressing @ brings up all options
-                const textarea = view.el.querySelector('textarea.chat-textarea');
-                const at_event = {
-                    'target': textarea,
-                    'preventDefault': _.noop,
-                    'stopPropagation': _.noop,
-                    'keyCode': 50
-                };
-                view.keyPressed(at_event);
-                textarea.value = '@';
-                view.keyUp(at_event);
-
-                expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3);
-                expect(view.el.querySelector('.suggestion-box__results li[aria-selected="true"]').textContent).toBe('tom');
-                expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('tom');
-                expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('dick');
-                expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
-                done();
-            }).catch(_.partial(console.error, _));
+            // Test that pressing @ brings up all options
+            const textarea = view.el.querySelector('textarea.chat-textarea');
+            const at_event = {
+                'target': textarea,
+                'preventDefault': _.noop,
+                'stopPropagation': _.noop,
+                'keyCode': 50,
+                'key': '@'
+            };
+            view.keyPressed(at_event);
+            textarea.value = '@';
+            view.keyUp(at_event);
+
+            expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3);
+            expect(view.el.querySelector('.suggestion-box__results li[aria-selected="true"]').textContent).toBe('tom');
+            expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('tom');
+            expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('dick');
+            expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
+            done();
         }));
 
         it("autocompletes when the user presses tab",
@@ -88,7 +87,8 @@
                 'target': textarea,
                 'preventDefault': _.noop,
                 'stopPropagation': _.noop,
-                'keyCode': 9
+                'keyCode': 9,
+                'key': 'Tab'
             }
             view.keyPressed(tab_event);
             view.keyUp(tab_event);

src/converse-autocomplete.js

@@ -13,10 +13,6 @@ import converse from "@converse/headless/converse-core";
 const { _, Backbone } = converse.env,
       u = converse.env.utils;
 
-const KEYCODES_MAP = {
-    '@': 50
-}
-
 converse.plugins.add("converse-autocomplete", {
 
     initialize () {
@@ -76,7 +72,7 @@ converse.plugins.add("converse-autocomplete", {
 
                 _.assignIn(this, {
                     'match_current_word': false, // Match only the current word, otherwise all input is matched
-                    'trigger_keycodes': [], // Array of keycodes that will trigger auto-complete
+                    '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
                     'min_chars': 2,
                     'max_items': 10,
@@ -295,8 +291,8 @@ converse.plugins.add("converse-autocomplete", {
                     return;
                 }
 
-                if (this.trigger_keycodes.includes(ev.keyCode)) {
-                    if (ev.keyCode === _converse.keycodes.TAB) {
+                if (this.ac_triggers.includes(ev.key)) {
+                    if (ev.key === "Tab") {
                         ev.preventDefault();
                     }
                     this.auto_completing = true;
@@ -320,7 +316,7 @@ converse.plugins.add("converse-autocomplete", {
                 let value = this.match_current_word ? u.getCurrentWord(this.input) : this.input.value;
 
                 let ignore_min_chars = false;
-                if (this.trigger_keycodes.includes(KEYCODES_MAP[value[0]]) && !this.include_triggers.includes(ev.keyCode)) {
+                if (this.ac_triggers.includes(value[0]) && !this.include_triggers.includes(ev.key)) {
                     ignore_min_chars = true;
                     value = value.slice('1');
                 }

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',
-                'keydown .chat-textarea': 'keyPressed',
+                'keypress .chat-textarea': 'keyPressed',
                 'keyup .chat-textarea': 'keyUp',
                 'input .chat-textarea': 'inputChanged'
             },
@@ -595,7 +595,7 @@ converse.plugins.add('converse-muc-views', {
                     'match_current_word': true,
                     'list': () => this.model.occupants.map(o => ({'label': o.getDisplayName(), 'value': `@${o.getDisplayName()}`})),
                     'filter': _converse.FILTER_STARTSWITH,
-                    'trigger_keycodes': [_converse.keycodes.AT, _converse.keycodes.TAB],
+                    'ac_triggers': ["Tab", "@"],
                     'include_triggers': []
                 });
                 this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
@@ -1837,9 +1837,7 @@ converse.plugins.add('converse-muc-views', {
                 const show = this.model.get('show');
                 return tpl_occupant(
                     _.extend(
-                        { '_': _, // XXX Normally this should already be included,
-                                  // but with the current webpack build,
-                                  // we only get a subset of the _ methods.
+                        { '_': _,
                           'jid': '',
                           'show': show,
                           'hint_show': _converse.PRETTY_CHAT_STATUS[show],