Stop using the deprecated `keyCode` and `which` Event properties.

src/headless/shared/constants.js

@@ -136,20 +136,19 @@ export const CORE_PLUGINS = [
 export const CHAT_STATES = ['active', 'composing', 'gone', 'inactive', 'paused'];
 
 export const KEYCODES = {
-    TAB: 9,
-    ENTER: 13,
-    SHIFT: 16,
-    CTRL: 17,
-    ALT: 18,
-    ESCAPE: 27,
-    LEFT_ARROW: 37,
-    UP_ARROW: 38,
-    RIGHT_ARROW: 39,
-    DOWN_ARROW: 40,
-    FORWARD_SLASH: 47,
-    AT: 50,
-    META: 91,
-    META_RIGHT: 93,
+    TAB: "Tab",
+    ENTER: "Enter",
+    SHIFT: "Shift",
+    CTRL: "Control",
+    ALT: "Alt",
+    ESCAPE: "Escape",
+    LEFT_ARROW: "ArrowLeft",
+    UP_ARROW: "ArrowUp",
+    RIGHT_ARROW: "ArrowRight",
+    DOWN_ARROW: "ArrowDown",
+    FORWARD_SLASH: "Divide",
+    AT: "Alt",
+    META: "Meta",
 };
 
 export const XFORM_TYPE_MAP = {

src/headless/types/shared/constants.d.ts

@@ -32,20 +32,19 @@ export const CONNECTION_STATUS: typeof CONNECTION_STATUS;
 export const CORE_PLUGINS: string[];
 export const CHAT_STATES: string[];
 export namespace KEYCODES {
-    let TAB: number;
-    let ENTER: number;
-    let SHIFT: number;
-    let CTRL: number;
-    let ALT: number;
-    let ESCAPE: number;
-    let LEFT_ARROW: number;
-    let UP_ARROW: number;
-    let RIGHT_ARROW: number;
-    let DOWN_ARROW: number;
-    let FORWARD_SLASH: number;
-    let AT: number;
-    let META: number;
-    let META_RIGHT: number;
+    let TAB: string;
+    let ENTER: string;
+    let SHIFT: string;
+    let CTRL: string;
+    let ALT: string;
+    let ESCAPE: string;
+    let LEFT_ARROW: string;
+    let UP_ARROW: string;
+    let RIGHT_ARROW: string;
+    let DOWN_ARROW: string;
+    let FORWARD_SLASH: string;
+    let AT: string;
+    let META: string;
 }
 export const XFORM_TYPE_MAP: {
     'text-private': string;

src/plugins/chatview/message-form.js

@@ -135,37 +135,42 @@ export default class MessageForm extends CustomElement {
         this.model.set({'draft': ev.target.value});
     }
 
+    /**
+     * @param {KeyboardEvent} [ev]
+     */
     onKeyDown (ev) {
         if (ev.ctrlKey) {
             // When ctrl is pressed, no chars are entered into the textarea.
             return;
         }
         if (!ev.shiftKey && !ev.altKey && !ev.metaKey) {
-            if (ev.keyCode === converse.keycodes.TAB) {
-                const value = u.getCurrentWord(ev.target, null, /(:.*?:)/g);
+            const target = /** @type {HTMLInputElement|HTMLTextAreaElement} */(ev.target);
+
+            if (ev.key === converse.keycodes.TAB) {
+                const value = u.getCurrentWord(target, null, /(:.*?:)/g);
                 if (value.startsWith(':')) {
                     ev.preventDefault();
                     ev.stopPropagation();
                     this.model.trigger(
                         'emoji-picker-autocomplete',
-                        { target: ev.target, value },
+                        { target, value },
                     );
                 }
-            } else if (ev.keyCode === converse.keycodes.FORWARD_SLASH) {
+            } else if (ev.key === converse.keycodes.FORWARD_SLASH) {
                 // Forward slash is used to run commands. Nothing to do here.
                 return;
-            } else if (ev.keyCode === converse.keycodes.ESCAPE) {
+            } else if (ev.key === converse.keycodes.ESCAPE) {
                 return this.onEscapePressed(ev);
-            } else if (ev.keyCode === converse.keycodes.ENTER) {
+            } else if (ev.key === converse.keycodes.ENTER) {
                 return this.onFormSubmitted(ev);
-            } else if (ev.keyCode === converse.keycodes.UP_ARROW && !ev.target.selectionEnd) {
+            } else if (ev.key === converse.keycodes.UP_ARROW && !target.selectionEnd) {
                 const textarea = /** @type {HTMLTextAreaElement} */(this.querySelector('.chat-textarea'));
                 if (!textarea.value || u.hasClass('correcting', textarea)) {
                     return this.model.editEarlierMessage();
                 }
             } else if (
-                ev.keyCode === converse.keycodes.DOWN_ARROW &&
-                ev.target.selectionEnd === ev.target.value.length &&
+                ev.key === converse.keycodes.DOWN_ARROW &&
+                target.selectionEnd === target.value.length &&
                 u.hasClass('correcting', this.querySelector('.chat-textarea'))
             ) {
                 return this.model.editLaterMessage();
@@ -175,15 +180,14 @@ export default class MessageForm extends CustomElement {
             [
                 converse.keycodes.SHIFT,
                 converse.keycodes.META,
-                converse.keycodes.META_RIGHT,
                 converse.keycodes.ESCAPE,
                 converse.keycodes.ALT
-            ].includes(ev.keyCode)
+            ].includes(ev.key)
         ) {
             return;
         }
         if (this.model.get('chat_state') !== COMPOSING) {
-            // Set chat state to composing if keyCode is not a forward-slash
+            // Set chat state to composing if key is not a forward-slash
             // (which would imply an internal command and not a message).
             this.model.setChatState(COMPOSING);
         }

src/plugins/chatview/tests/actions.js

@@ -22,7 +22,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 1);
 
@@ -70,7 +70,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 1);
 

src/plugins/chatview/tests/chatbox.js

@@ -63,7 +63,7 @@ describe("Chatboxes", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await u.waitUntil(() => _converse.api.confirm.calls.count() === 1);
             await u.waitUntil(() => sizzle('converse-chat-message', view).length === 0);
@@ -267,7 +267,7 @@ describe("Chatboxes", function () {
                 const ev = {
                     target: textarea,
                     preventDefault: function preventDefault () {},
-                    keyCode: 13 // Enter
+                    key: "Enter",
                 };
                 const message_form = view.querySelector('converse-message-form');
                 message_form.onKeyDown(ev);
@@ -427,7 +427,7 @@ describe("Chatboxes", function () {
                     const message_form = view.querySelector('converse-message-form');
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     expect(view.model.get('chat_state')).toBe('composing');
                     expect(api.connection.get().send).toHaveBeenCalled();
@@ -442,7 +442,7 @@ describe("Chatboxes", function () {
                     // The notification is not sent again
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     expect(view.model.get('chat_state')).toBe('composing');
                     expect(_converse.api.trigger.calls.count(), 1);
@@ -467,7 +467,7 @@ describe("Chatboxes", function () {
                     const message_form = view.querySelector('converse-message-form');
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     expect(view.model.get('chat_state')).toBe('composing');
                     expect(api.connection.get().send).not.toHaveBeenCalled();
@@ -576,7 +576,7 @@ describe("Chatboxes", function () {
                     const message_form = view.querySelector('converse-message-form');
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     expect(view.model.get('chat_state')).toBe('composing');
 
@@ -608,14 +608,14 @@ describe("Chatboxes", function () {
                     // timeout.
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     expect(view.model.setChatState).toHaveBeenCalled();
                     expect(view.model.get('chat_state')).toBe('composing');
 
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     expect(view.model.get('chat_state')).toBe('composing');
                 }));
@@ -714,7 +714,7 @@ describe("Chatboxes", function () {
                     const message_form = view.querySelector('converse-message-form');
                     message_form.onKeyDown({
                         target: view.querySelector('textarea.chat-textarea'),
-                        keyCode: 1
+                        key: "C",
                     });
                     await u.waitUntil(() => view.model.get('chat_state') === 'composing', 600);
                     let stanza = await u.waitUntil(() => sent_stanzas.filter(s => s.querySelector('message composing')).pop());
@@ -935,7 +935,7 @@ describe("Chatboxes", function () {
             message_form.onKeyDown({
                 target: view.querySelector('textarea.chat-textarea'),
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             await u.waitUntil(() => _converse.api.confirm.calls.count() === 1);
             expect(_converse.api.confirm).toHaveBeenCalledWith('Are you sure you want to clear the messages from this conversation?');

src/plugins/chatview/tests/corrections.js

@@ -20,7 +20,7 @@ describe("A Chat Message", function () {
         const message_form = view.querySelector('converse-message-form');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('');
 
@@ -28,7 +28,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
         expect(view.querySelectorAll('.chat-msg').length).toBe(1);
@@ -39,7 +39,7 @@ describe("A Chat Message", function () {
         expect(textarea.value).toBe('');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('But soft, what light through yonder airlock breaks?');
         expect(view.model.messages.at(0).get('correcting')).toBe(true);
@@ -52,7 +52,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.replace(/<!-.*?->/g, '') === new_text);
 
@@ -85,7 +85,7 @@ describe("A Chat Message", function () {
         await u.waitUntil(() => textarea.value === '')
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('But soft, what light through yonder window breaks?');
         expect(view.model.messages.at(0).get('correcting')).toBe(true);
@@ -94,7 +94,7 @@ describe("A Chat Message", function () {
         expect(textarea.value).toBe('But soft, what light through yonder window breaks?');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 40 // Down arrow
+            key: "ArrowDown",
         });
         expect(textarea.value).toBe('');
         expect(view.model.messages.at(0).get('correcting')).toBe(false);
@@ -106,7 +106,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text'))
             .filter(m => m.textContent.replace(/<!-.*?->/g, '') === new_text).length);
@@ -116,13 +116,13 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 3);
 
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('Arise, fair sun, and kill the envious moon');
         await u.waitUntil(() => view.model.messages.at(2).get('correcting') === true);
@@ -134,7 +134,7 @@ describe("A Chat Message", function () {
                                 // but for some reason not in tests, so we set it manually.
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('It is the east, and Juliet is the one.');
         expect(view.model.messages.at(0).get('correcting')).toBeFalsy();
@@ -146,7 +146,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => textarea.value === '');
         await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text')).filter(
@@ -183,7 +183,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
 
@@ -211,7 +211,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.replace(/<!-.*?->/g, '') === text);
         expect(api.connection.get().send).toHaveBeenCalled();

src/plugins/chatview/tests/emojis.js

@@ -67,7 +67,7 @@ describe("Emojis", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 3);
             const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
@@ -76,7 +76,7 @@ describe("Emojis", function () {
             expect(textarea.value).toBe('');
             message_form.onKeyDown({
                 target: textarea,
-                keyCode: 38 // Up arrow
+                key: "ArrowUp",
             });
             expect(textarea.value).toBe('💩 😇');
             expect(view.model.messages.at(2).get('correcting')).toBe(true);
@@ -87,7 +87,7 @@ describe("Emojis", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text'))
                 .filter(el => el.textContent === edited_text).length);
@@ -99,7 +99,7 @@ describe("Emojis", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 4);
 
@@ -107,7 +107,7 @@ describe("Emojis", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 5);
 
@@ -148,7 +148,7 @@ describe("Emojis", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await new Promise(resolve => view.model.messages.once('rendered', resolve));
             message = view.querySelector(last_msg_sel);
@@ -199,7 +199,7 @@ describe("Emojis", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13 // Enter
+                key: "Enter",
             });
             await new Promise(resolve => view.model.messages.once('rendered', resolve));
             const body = view.querySelector('converse-chat-message-body');

src/plugins/chatview/tests/message-avatar.js

@@ -19,7 +19,7 @@ describe("A Chat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 1);
 

src/plugins/chatview/tests/messages.js

@@ -1213,7 +1213,7 @@ describe("A Chat Message", function () {
                     'target': textarea,
                     'preventDefault': function preventDefault () {},
                     'stopPropagation': function stopPropagation () {},
-                    'keyCode': 13 // Enter
+                    key: "Enter",
                 }
                 const message_form = view.querySelector('converse-message-form');
                 message_form.onKeyDown(enter_event);
@@ -1258,7 +1258,7 @@ describe("A Chat Message", function () {
                     'target': textarea,
                     'preventDefault': function preventDefault () {},
                     'stopPropagation': function stopPropagation () {},
-                    'keyCode': 13 // Enter
+                    key: "Enter",
                 }
                 const message_form = view.querySelector('converse-message-form');
                 message_form.onKeyDown(enter_event);

src/plugins/chatview/tests/receipts.js

@@ -132,7 +132,7 @@ describe("A delivery receipt", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         const chatbox = _converse.chatboxes.get(contact_jid);
         expect(chatbox).toBeDefined();
@@ -153,7 +153,7 @@ describe("A delivery receipt", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await new Promise(resolve => view.model.messages.once('rendered', resolve));
 

src/plugins/chatview/tests/spoilers.js

@@ -96,7 +96,7 @@ describe("A spoiler message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13
+            key: "Enter",
         });
         await new Promise(resolve => api.listen.on('sendMessage', resolve));
 
@@ -159,7 +159,7 @@ describe("A spoiler message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13
+            key: "Enter",
         });
         await new Promise(resolve => api.listen.on('sendMessage', resolve));
 

src/plugins/chatview/tests/styling.js

@@ -556,7 +556,7 @@ describe("An XEP-0393 styled message ", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
 
@@ -570,14 +570,14 @@ describe("An XEP-0393 styled message ", function () {
         expect(textarea.value).toBe('');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
 
         textarea.value = `A\nhttps://conversejs.org\n\nhttps://opkode.com`;
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await new Promise(resolve => view.model.messages.once('rendered', resolve));
 

src/plugins/muc-views/message-form.js

@@ -50,11 +50,11 @@ export default class MUCMessageForm extends MessageForm {
     }
 
     getAutoCompleteList () {
-        return this.model.getAllKnownNicknames().map(nick => ({ 'label': nick, 'value': `@${nick}` }));
+        return this.model.getAllKnownNicknames().map((nick) => ({ label: nick, value: `@${nick}` }));
     }
 
     /**
-     * @param {Event} ev
+     * @param {KeyboardEvent} ev
      */
     onKeyDown (ev) {
         if (this.shouldAutoComplete() && this.mention_auto_complete.onKeyDown(ev)) {

src/plugins/muc-views/tests/actions.js

@@ -47,7 +47,7 @@ describe("A Groupchat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg').length === 2);
         const copyActions = view.querySelectorAll('.chat-msg__action-copy');

src/plugins/muc-views/tests/autocomplete.js

@@ -41,7 +41,6 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 50,
             'key': '@'
         };
         const message_form = view.querySelector('converse-muc-message-form');
@@ -105,7 +104,6 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 50,
             'key': '@'
         };
         const message_form = view.querySelector('converse-muc-message-form');
@@ -172,7 +170,6 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 50,
             'key': '@'
         };
         textarea.value = '('
@@ -225,7 +222,6 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault() { },
             'stopPropagation': function stopPropagation() { },
-            'keyCode': 50,
             'key': '@'
         };
 
@@ -289,8 +285,7 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 9,
-            'key': 'Tab'
+            key: 'Tab'
         }
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown(tab_event);
@@ -304,7 +299,7 @@ describe("The nickname autocomplete feature", function () {
         const backspace_event = {
             'target': textarea,
             'preventDefault': function preventDefault () {},
-            'keyCode': 8
+            key: "Backspace",
         }
         for (let i=0; i<3; i++) {
             // Press backspace 3 times to remove "som"
@@ -335,7 +330,7 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': () => (up_arrow_event.defaultPrevented = true),
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 38
+            key: "ArrowUp",
         }
         message_form.onKeyDown(up_arrow_event);
         message_form.onKeyUp(up_arrow_event);
@@ -348,7 +343,7 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 13 // Enter
+            key: "Enter",
         });
         expect(textarea.value).toBe('hello s @some2 ');
 
@@ -400,8 +395,7 @@ describe("The nickname autocomplete feature", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 8,
-            'key': 'Backspace'
+            key: 'Backspace'
         }
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown(backspace_event);

src/plugins/muc-views/tests/commands.js

@@ -14,7 +14,7 @@ describe("Groupchats", function () {
             await mock.openAndEnterMUC(_converse, 'lounge@montague.lit', 'romeo');
             const view = _converse.chatboxviews.get('lounge@montague.lit');
             const textarea = await u.waitUntil(() => view.querySelector('.chat-textarea'));
-            const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, 'keyCode': 13 };
+            const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, key: "Enter" };
             textarea.value = '/help';
             const message_form = view.querySelector('converse-muc-message-form');
             message_form.onKeyDown(enter);
@@ -110,7 +110,7 @@ describe("Groupchats", function () {
             await mock.openAndEnterMUC(_converse, 'lounge@montague.lit', 'romeo');
             const view = _converse.chatboxviews.get('lounge@montague.lit');
             const textarea = await u.waitUntil(() => view.querySelector('.chat-textarea'));
-            const enter = { 'target': textarea, 'preventDefault': function () {}, 'keyCode': 13 };
+            const enter = { 'target': textarea, 'preventDefault': function () {}, key: "Enter" };
             spyOn(window, 'confirm').and.callFake(() => true);
             textarea.value = '/clear';
             const message_form = view.querySelector('converse-muc-message-form');
@@ -178,7 +178,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             expect(_converse.api.connection.get().send).not.toHaveBeenCalled();
             await u.waitUntil(() => view.querySelectorAll('.chat-error').length);
@@ -190,7 +190,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
 
             await u.waitUntil(() => sent_stanza?.querySelector('item[affiliation="member"]'));
@@ -295,7 +295,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             const { sent_stanzas } = _converse.api.connection.get();
             await u.waitUntil(() => sent_stanzas.filter(s => s.textContent.trim() === 'This is the groupchat subject'));
@@ -305,7 +305,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
 
             let sent_stanza = await u.waitUntil(() => sent_stanzas.filter(s => s.textContent.trim() === 'This is a new subject').pop());
@@ -319,7 +319,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             sent_stanza = await u.waitUntil(() => sent_stanzas.filter(s => s.textContent.trim() === 'This is yet another subject').pop());
             expect(Strophe.serialize(sent_stanza).toLocaleString()).toBe(
@@ -335,7 +335,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             sent_stanza = await u.waitUntil(() => sent_stanzas.pop());
             expect(Strophe.serialize(sent_stanza).toLocaleString()).toBe(
@@ -354,7 +354,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             await u.waitUntil(() => _converse.api.confirm.calls.count() === 1);
             expect(_converse.api.confirm).toHaveBeenCalledWith('Are you sure you want to clear the messages from this conversation?');
@@ -389,7 +389,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             await u.waitUntil(() => view.model.validateRoleOrAffiliationChangeArgs.calls.count());
             const err_msg = await u.waitUntil(() => view.querySelector('.chat-error'));
@@ -475,7 +475,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             await u.waitUntil(() => view.model.validateRoleOrAffiliationChangeArgs.calls.count());
             await u.waitUntil(() => view.querySelector('.message:last-child')?.textContent?.trim() ===
@@ -571,7 +571,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             await u.waitUntil(() => view.model.validateRoleOrAffiliationChangeArgs.calls.count());
             await u.waitUntil(() => view.querySelector('.message:last-child')?.textContent?.trim() ===
@@ -653,7 +653,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
 
             await u.waitUntil(() => view.model.validateRoleOrAffiliationChangeArgs.calls.count());
@@ -778,7 +778,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
 
             await u.waitUntil(() => view.model.validateRoleOrAffiliationChangeArgs.calls.count());

src/plugins/muc-views/tests/corrections.js

@@ -186,7 +186,7 @@ describe("A Groupchat Message", function () {
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('');
 
@@ -194,7 +194,7 @@ describe("A Groupchat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg').length === 1);
         expect(view.querySelector('.chat-msg__text').textContent)
@@ -204,7 +204,7 @@ describe("A Groupchat Message", function () {
         expect(textarea.value).toBe('');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('But soft, what light through yonder airlock breaks?');
         expect(view.model.messages.at(0).get('correcting')).toBe(true);
@@ -217,7 +217,7 @@ describe("A Groupchat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text'))
             .filter(m => m.textContent.replace(/<!-.*?->/g, '') === new_text).length);
@@ -263,7 +263,7 @@ describe("A Groupchat Message", function () {
         expect(textarea.value).toBe('');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('But soft, what light through yonder window breaks?');
         expect(view.model.messages.at(0).get('correcting')).toBe(true);
@@ -272,7 +272,7 @@ describe("A Groupchat Message", function () {
         expect(textarea.value).toBe('But soft, what light through yonder window breaks?');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 40 // Down arrow
+            key: "ArrowDown",
         });
         expect(textarea.value).toBe('');
         expect(view.model.messages.at(0).get('correcting')).toBe(false);

src/plugins/muc-views/tests/emojis.js

@@ -23,7 +23,6 @@ describe("Emojis", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 9,
                 'key': 'Tab'
             }
             const message_form = view.querySelector('converse-muc-message-form');
@@ -46,7 +45,7 @@ describe("Emojis", function () {
             expect(input.value).toBe(':grimacing:');
 
             // Check that ENTER now inserts the match
-            const enter_event = Object.assign({}, tab_event, {'keyCode': 13, 'key': 'Enter', 'target': input, 'bubbles': true});
+            const enter_event = Object.assign({}, tab_event, { 'key': 'Enter', 'target': input, 'bubbles': true});
             input.dispatchEvent(new KeyboardEvent('keydown', enter_event));
 
             await u.waitUntil(() => input.value === '');
@@ -88,7 +87,6 @@ describe("Emojis", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 9,
                 'key': 'Tab'
             }
             const message_form = view.querySelector('converse-muc-message-form');
@@ -138,7 +136,6 @@ describe("Emojis", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 9,
                 'key': 'Tab'
             }
             textarea.value = ':';
@@ -149,7 +146,7 @@ describe("Emojis", function () {
             const input = picker.querySelector('.emoji-search');
             input.dispatchEvent(new KeyboardEvent('keydown', tab_event));
             await u.waitUntil(() => input.value === ':100:');
-            const enter_event = Object.assign({}, tab_event, {'keyCode': 13, 'key': 'Enter', 'target': input, 'bubbles': true});
+            const enter_event = Object.assign({}, tab_event, { 'key': 'Enter', 'target': input, 'bubbles': true});
             input.dispatchEvent(new KeyboardEvent('keydown', enter_event));
             expect(textarea.value).toBe(':100: ');
 
@@ -194,7 +191,7 @@ describe("Emojis", function () {
             expect(visible_emojis[1].getAttribute('data-emoji')).toBe(':smiley_cat:');
 
             // Check that pressing enter without an unambiguous match does nothing
-            const enter_event = Object.assign({}, event, {'keyCode': 13, 'bubbles': true});
+            const enter_event = Object.assign({}, event, { key: "Enter", 'bubbles': true});
             input.dispatchEvent(new KeyboardEvent('keydown', enter_event));
             expect(input.value).toBe('smiley');
 
@@ -208,7 +205,7 @@ describe("Emojis", function () {
             await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji:not(.hidden)', view).length === 2, 1000);
 
             // Test that TAB autocompletes the to first match
-            const tab_event = Object.assign({}, event, {'keyCode': 9, 'key': 'Tab'});
+            const tab_event = Object.assign({}, event, { 'key': 'Tab'});
             input.dispatchEvent(new KeyboardEvent('keydown', tab_event));
 
             await u.waitUntil(() => input.value === ':smiley:');

src/plugins/muc-views/tests/markers.js

@@ -18,7 +18,7 @@ describe("A XEP-0333 Chat Marker", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
         expect(view.querySelectorAll('.chat-msg').length).toBe(1);

src/plugins/muc-views/tests/mentions.js

@@ -108,7 +108,7 @@ describe("An incoming groupchat message", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 13 // Enter
+            key: "Enter",
         }
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown(enter_event);
@@ -361,7 +361,7 @@ describe("A sent groupchat message", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 13 // Enter
+                key: "Enter",
             }
             const message_form = view.querySelector('converse-muc-message-form');
             message_form.onKeyDown(enter_event);
@@ -421,7 +421,7 @@ describe("A sent groupchat message", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 13 // Enter
+                key: "Enter",
             }
             const message_form = view.querySelector('converse-muc-message-form');
             message_form.onKeyDown(enter_event);
@@ -508,7 +508,7 @@ describe("A sent groupchat message", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 13 // Enter
+                key: "Enter",
             }
             const message_form = view.querySelector('converse-muc-message-form');
             message_form.onKeyDown(enter_event);
@@ -544,7 +544,7 @@ describe("A sent groupchat message", function () {
             'target': textarea,
             'preventDefault': function preventDefault () {},
             'stopPropagation': function stopPropagation () {},
-            'keyCode': 13 // Enter
+            key: "Enter",
         }
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown(enter_event);

src/plugins/muc-views/tests/modtools.js

@@ -5,7 +5,7 @@ const { stx, sizzle, Strophe, u } = converse.env;
 async function openModtools (_converse, view) {
     const textarea = await u.waitUntil(() => view.querySelector('.chat-textarea'));
     textarea.value = '/modtools';
-    const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, 'keyCode': 13 };
+    const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, key: "Enter" };
     const message_form = view.querySelector('converse-muc-message-form');
     message_form.onKeyDown(enter);
     const modal = await u.waitUntil(() => _converse.api.modal.get('converse-modtools-modal'));
@@ -240,7 +240,7 @@ describe("The groupchat moderator tool", function () {
 
         const textarea = await u.waitUntil(() => view.querySelector('.chat-textarea'));
         textarea.value = '/modtools';
-        const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, 'keyCode': 13 };
+        const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, key: "Enter" };
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown(enter);
 
@@ -442,7 +442,7 @@ describe("The groupchat moderator tool", function () {
         const view = _converse.chatboxviews.get(muc_jid);
         const textarea = await u.waitUntil(() => view.querySelector('.chat-textarea'));
         textarea.value = '/modtools';
-        const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, 'keyCode': 13 };
+        const enter = { 'target': textarea, 'preventDefault': function preventDefault () {}, key: "Enter" };
         const message_form = view.querySelector('converse-muc-message-form');
         message_form.onKeyDown(enter);
 

src/plugins/muc-views/tests/muc-messages.js

@@ -22,7 +22,7 @@ describe("A Groupchat Message", function () {
                 'target': textarea,
                 'preventDefault': function preventDefault () {},
                 'stopPropagation': function stopPropagation () {},
-                'keyCode': 13 // Enter
+                key: "Enter",
             }
             const message_form = view.querySelector('converse-muc-message-form');
             message_form.onKeyDown(enter_event);
@@ -305,7 +305,7 @@ describe("A Groupchat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await new Promise(resolve => view.model.messages.once('rendered', resolve));
         expect(view.querySelectorAll('.chat-msg__body.chat-msg__body--received').length).toBe(0);
@@ -348,7 +348,7 @@ describe("A Groupchat Message", function () {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await new Promise(resolve => view.model.messages.once('rendered', resolve));
         expect(view.querySelectorAll('.chat-msg').length).toBe(1);

src/plugins/muc-views/tests/muc-registration.js

@@ -19,7 +19,7 @@ describe("Chatrooms", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             let stanza = await u.waitUntil(() => _converse.api.connection.get().IQ_stanzas.filter(
                 iq => sizzle(`iq[to="${muc_jid}"][type="get"] query[xmlns="jabber:iq:register"]`, iq).length

src/plugins/muc-views/tests/muc.js

@@ -1657,7 +1657,7 @@ describe("Groupchats", function () {
             message_form.onKeyDown({
                 target: textarea,
                 preventDefault: function preventDefault () {},
-                keyCode: 13
+                key: "Enter",
             });
             await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
 

src/plugins/muc-views/tests/unfurls.js

@@ -425,7 +425,7 @@ describe("A Groupchat Message", function () {
             target: textarea,
             preventDefault: function preventDefault () {},
             stopPropagation: function stopPropagation () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         }
         message_form.onKeyDown(enter_event);
 
@@ -472,7 +472,7 @@ describe("A Groupchat Message", function () {
         expect(textarea.value).toBe('');
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe(unfurl_url);
         textarea.value = "never mind";

src/plugins/omemo/tests/corrections.js

@@ -37,7 +37,7 @@ describe("An OMEMO encrypted message", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         iq_stanza = await u.waitUntil(() => mock.bundleFetched(_converse, contact_jid, '555'));
         stanza = $iq({
@@ -87,7 +87,7 @@ describe("An OMEMO encrypted message", function() {
 
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('But soft, what light through yonder airlock breaks?');
         expect(view.model.messages.at(0).get('correcting')).toBe(true);
@@ -99,7 +99,7 @@ describe("An OMEMO encrypted message", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.replace(/<!-.*?->/g, '') === newer_text);
 
@@ -139,7 +139,7 @@ describe("An OMEMO encrypted message", function() {
 
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe('But soft, what light through yonder door breaks?');
 
@@ -148,7 +148,7 @@ describe("An OMEMO encrypted message", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.replace(/<!-.*?->/g, '') === newest_text);
 
@@ -293,7 +293,7 @@ describe("An OMEMO encrypted MUC message", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
 
         iq_stanza = await u.waitUntil(() => mock.bundleFetched(_converse, contact_jid, '4e30f35051b7b8b42abe083742187228'), 1000);
@@ -367,7 +367,7 @@ describe("An OMEMO encrypted MUC message", function() {
 
         message_form.onKeyDown({
             target: textarea,
-            keyCode: 38 // Up arrow
+            key: "ArrowUp",
         });
         expect(textarea.value).toBe(original_text);
         expect(view.model.messages.at(0).get('correcting')).toBe(true);
@@ -377,7 +377,7 @@ describe("An OMEMO encrypted MUC message", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.replace(/<!-.*?->/g, '') === new_text);
 

src/plugins/omemo/tests/muc.js

@@ -89,7 +89,7 @@ describe("The OMEMO module", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         iq_stanza = await u.waitUntil(() => mock.bundleFetched(_converse, contact_jid, '4e30f35051b7b8b42abe083742187228'), 1000);
         stanza = $iq({
@@ -227,7 +227,7 @@ describe("The OMEMO module", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         let iq_stanza = await u.waitUntil(() => mock.deviceListFetched(_converse, contact_jid));
         expect(Strophe.serialize(iq_stanza)).toBe(

src/plugins/omemo/tests/omemo.js

@@ -53,7 +53,7 @@ describe("The OMEMO module", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         iq_stanza = await u.waitUntil(() => mock.bundleFetched(_converse, contact_jid, '555'));
         stanza = stx`<iq from="${contact_jid}"
@@ -365,7 +365,7 @@ describe("The OMEMO module", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13 // Enter
+            key: "Enter",
         });
         iq_stanza = await u.waitUntil(() => mock.bundleFetched(_converse, _converse.bare_jid, '988349631'));
         expect(iq_stanza).toEqualStanza(
@@ -1128,7 +1128,7 @@ describe("The OMEMO module", function() {
         message_form.onKeyDown({
             target: textarea,
             preventDefault: function preventDefault () {},
-            keyCode: 13
+            key: "Enter",
         });
 
         view.model.save({'omemo_supported': false});

src/shared/autocomplete/autocomplete.js

@@ -223,30 +223,33 @@ export class AutoComplete extends EventEmitter(Object) {
         }
     }
 
+    /**
+     * @param {KeyboardEvent} [ev]
+     */
     onKeyDown (ev) {
         if (this.opened) {
-            if ([converse.keycodes.ENTER, converse.keycodes.TAB].includes(ev.keyCode) && this.selected) {
+            if ([converse.keycodes.ENTER, converse.keycodes.TAB].includes(ev.key) && this.selected) {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.select();
                 return true;
-            } else if (ev.keyCode === converse.keycodes.ESCAPE) {
+            } else if (ev.key === converse.keycodes.ESCAPE) {
                 this.close({'reason': 'esc'});
                 return true;
-            } else if ([converse.keycodes.UP_ARROW, converse.keycodes.DOWN_ARROW].includes(ev.keyCode)) {
+            } else if ([converse.keycodes.UP_ARROW, converse.keycodes.DOWN_ARROW].includes(ev.key)) {
+                debugger;
                 ev.preventDefault();
                 ev.stopPropagation();
-                this[ev.keyCode === converse.keycodes.UP_ARROW ? "previous" : "next"]();
+                this[ev.key === converse.keycodes.UP_ARROW ? "previous" : "next"]();
                 return true;
             }
         }
 
         if ([converse.keycodes.SHIFT,
                 converse.keycodes.META,
-                converse.keycodes.META_RIGHT,
                 converse.keycodes.ESCAPE,
                 converse.keycodes.ALT
-            ].includes(ev.keyCode)) {
+            ].includes(ev.key)) {
 
             return;
         }
@@ -265,7 +268,8 @@ export class AutoComplete extends EventEmitter(Object) {
             }
             this.auto_completing = true;
         } else if (ev.key === "Backspace") {
-            const word = u.getCurrentWord(ev.target, ev.target.selectionEnd-1);
+            const target = /** @type {HTMLInputElement} */(ev.target);
+            const word = u.getCurrentWord(target, target.selectionEnd-1);
             if (helpers.isMention(word, this.ac_triggers)) {
                 this.auto_completing = true;
             }
@@ -277,8 +281,8 @@ export class AutoComplete extends EventEmitter(Object) {
      */
     async evaluate (ev) {
         const selecting = this.selected && ev && (
-            ev.keyCode === converse.keycodes.UP_ARROW ||
-            ev.keyCode === converse.keycodes.DOWN_ARROW
+            ev.key === converse.keycodes.UP_ARROW ||
+            ev.key === converse.keycodes.DOWN_ARROW
         );
 
         if (!this.auto_evaluate && !this.auto_completing || selecting) {

src/shared/chat/emoji-picker.js

@@ -147,11 +147,9 @@ export default class EmojiPicker extends CustomElement {
     #onGlobalKeyDown (ev) {
         if (!this.navigator) return;
 
-        if (ev.keyCode === KEYCODES.ENTER && u.isVisible(this)) {
+        if (ev.key === KEYCODES.ENTER && u.isVisible(this)) {
             this.onEnterPressed(ev);
-        } else if (ev.keyCode === KEYCODES.DOWN_ARROW &&
-                !this.navigator.enabled &&
-                u.isVisible(this)) {
+        } else if (ev.key === KEYCODES.DOWN_ARROW && !this.navigator.enabled && u.isVisible(this)) {
             this.enableArrowNavigation(ev);
         }
     }
@@ -220,9 +218,9 @@ export default class EmojiPicker extends CustomElement {
     /**
      * @param {KeyboardEvent} ev
      */
-    onSearchInputKeyDown (ev) {
-        const target = /** @type {HTMLInputElement} */(ev.target);
-        if (ev.keyCode === KEYCODES.TAB) {
+    onSearchInputKeyDown(ev) {
+        const target = /** @type {HTMLInputElement} */ (ev.target);
+        if (ev.key === KEYCODES.TAB) {
             if (target.value) {
                 ev.preventDefault();
                 const match = converse.emojis.shortnames.find(sn => FILTER_CONTAINS(sn, target.value));
@@ -230,12 +228,9 @@ export default class EmojiPicker extends CustomElement {
             } else if (!this.navigator.enabled) {
                 this.enableArrowNavigation(ev);
             }
-        } else if (ev.keyCode === KEYCODES.DOWN_ARROW && !this.navigator.enabled) {
+        } else if (ev.key === KEYCODES.DOWN_ARROW && !this.navigator.enabled) {
             this.enableArrowNavigation(ev);
-        } else if (
-            ev.keyCode !== KEYCODES.ENTER &&
-            ev.keyCode !== KEYCODES.DOWN_ARROW
-        ) {
+        } else if (ev.key !== KEYCODES.ENTER && ev.key !== KEYCODES.DOWN_ARROW) {
             this.debouncedFilter(target);
         }
     }

src/shared/components/dropdown.js

@@ -77,8 +77,11 @@ export default class Dropdown extends DropdownBase {
         this.navigator.select(/** @type HTMLElement */(this.menu.firstElementChild));
     }
 
+    /**
+     * @param {KeyboardEvent} ev
+     */
     handleKeyUp (ev) {
-        if (ev.keyCode === KEYCODES.DOWN_ARROW && !this.navigator.enabled) {
+        if (ev.key === KEYCODES.DOWN_ARROW && !this.navigator.enabled) {
             this.enableArrowNavigation(ev);
         }
     }

src/shared/dom-navigator.js

@@ -95,14 +95,11 @@ class DOMNavigator {
      */
     static get DEFAULTS () {
         return {
-            home: [`${keycodes.SHIFT}+${keycodes.UP_ARROW}`],
-            end: [`${keycodes.SHIFT}+${keycodes.DOWN_ARROW}`],
+            home: [`${keycodes.SHIFT}${keycodes.UP_ARROW}`],
+            end: [`${keycodes.SHIFT}${keycodes.DOWN_ARROW}`],
             up: [keycodes.UP_ARROW],
             down: [keycodes.DOWN_ARROW],
-            left: [
-                keycodes.LEFT_ARROW,
-                `${keycodes.SHIFT}+${keycodes.TAB}`
-            ],
+            left: [keycodes.LEFT_ARROW, `${keycodes.SHIFT}${keycodes.TAB}`],
             right: [keycodes.RIGHT_ARROW, keycodes.TAB],
             getSelector: null,
             jump_to_picked: null,

src/shared/tests/mock.js

@@ -546,7 +546,7 @@ async function sendMessage (view, message) {
     message_form.onKeyDown({
         target: view.querySelector('textarea.chat-textarea'),
         preventDefault: () => {},
-        keyCode: 13
+        key: "Enter",
     });
     return promise;
 }

src/types/plugins/chatview/message-form.d.ts

@@ -24,7 +24,10 @@ export default class MessageForm extends CustomElement {
     onPaste(ev: any): void;
     onDrop(evt: any): void;
     onKeyUp(ev: any): void;
-    onKeyDown(ev: any): any;
+    /**
+     * @param {KeyboardEvent} [ev]
+     */
+    onKeyDown(ev?: KeyboardEvent): any;
     onFormSubmitted(ev: any): Promise<void>;
 }
 export type EmojiDropdown = import("shared/chat/emoji-dropdown.js").default;

src/types/plugins/muc-views/message-form.d.ts

@@ -8,9 +8,9 @@ export default class MUCMessageForm extends MessageForm {
     auto_completing: boolean;
     getAutoCompleteList(): any;
     /**
-     * @param {Event} ev
+     * @param {KeyboardEvent} ev
      */
-    onKeyDown(ev: Event): void;
+    onKeyDown(ev: KeyboardEvent): void;
     /**
      * @param {KeyboardEvent} ev
      */

src/types/shared/autocomplete/autocomplete.d.ts

@@ -56,7 +56,10 @@ export class AutoComplete extends AutoComplete_base {
     auto_completing: boolean;
     onMouseOver(ev: any): void;
     onMouseDown(ev: any): void;
-    onKeyDown(ev: any): boolean;
+    /**
+     * @param {KeyboardEvent} [ev]
+     */
+    onKeyDown(ev?: KeyboardEvent): boolean;
     /**
      * @param {KeyboardEvent} [ev]
      */

src/types/shared/components/dropdown.d.ts

@@ -15,7 +15,10 @@ export default class Dropdown extends DropdownBase {
     initArrowNavigation(): void;
     navigator: DOMNavigator;
     enableArrowNavigation(ev: any): void;
-    handleKeyUp(ev: any): void;
+    /**
+     * @param {KeyboardEvent} ev
+     */
+    handleKeyUp(ev: KeyboardEvent): void;
 }
 export type DOMNavigatorOptions = any;
 import DropdownBase from 'shared/components/dropdownbase.js';

src/types/shared/qrcode/utils.d.ts

@@ -15,7 +15,7 @@ export namespace QRUtil {
     function getPatternPosition(typeNumber: any): number[];
     function getMask(maskPattern: any, i: any, j: any): boolean;
     function getErrorCorrectPolynomial(errorCorrectLength: any): QRPolynomial;
-    function getLengthInBits(mode: any, type: any): 10 | 8 | 9 | 11 | 12 | 16 | 13 | 14;
+    function getLengthInBits(mode: any, type: any): 10 | 8 | 9 | 11 | 12 | 16 | 14 | 13;
     function getLostPoint(qrCode: any): number;
 }
 import QRPolynomial from "./polynomial";