Fix detection of modifiers on Firefox in textarea or input and modifiers sent through virtual keycodes (#986)

* Fix firefox modifiers in textarea and input

* Fix modifiers sent through virtual keycodes

* Styling fix

* Fix wording in comment

2 files changed, 17 insertions, 5 deletions

diff --git a/ext/js/dom/document-util.js b/ext/js/dom/document-util.js
index bf11f421..fc9a7f12 100644
--- a/ext/js/dom/document-util.js
+++ b/ext/js/dom/document-util.js
@@ -147,6 +147,17 @@ export function getActiveModifiers(event) {
     if (event.ctrlKey) { modifiers.push('ctrl'); }
     if (event.metaKey) { modifiers.push('meta'); }
     if (event.shiftKey) { modifiers.push('shift'); }
+
+    // For KeyboardEvent, when modifiers are pressed on Firefox without any other keys, the keydown event does not always contain the last pressed modifier as event.{modifier}
+    // This occurs when the focus is in a textarea element, an input element, or when the raw keycode is not a modifier but the virtual keycode is (this often occurs due to OS level keyboard remapping)
+    // Chrome and Firefox (outside of textareas, inputs, and virtual keycodes) do report the modifier in both the event.{modifier} and the event.code
+    // We must check if the modifier has already been added to not duplicate it
+    if (event instanceof KeyboardEvent) {
+        if ((event.code === 'AltLeft' || event.code === 'AltRight' || event.key === 'Alt') && !modifiers.includes('alt')) { modifiers.push('alt'); }
+        if ((event.code === 'ControlLeft' || event.code === 'ControlRight' || event.key === 'Control') && !modifiers.includes('ctrl')) { modifiers.push('ctrl'); }
+        if ((event.code === 'MetaLeft' || event.code === 'MetaRight' || event.key === 'Meta') && !modifiers.includes('meta')) { modifiers.push('meta'); }
+        if ((event.code === 'ShiftLeft' || event.code === 'ShiftRight' || event.key === 'Shift') && !modifiers.includes('shift')) { modifiers.push('shift'); }
+    }
     return modifiers;
 }
 
diff --git a/ext/js/language/text-scanner.js b/ext/js/language/text-scanner.js
index 7c1b5b33..17809300 100644
--- a/ext/js/language/text-scanner.js
+++ b/ext/js/language/text-scanner.js
@@ -561,17 +561,18 @@ export class TextScanner extends EventDispatcher {
      * @param {KeyboardEvent} e
      */
     _onKeyDown(e) {
-        if (this._lastMouseMove !== null && (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey)) {
+        const modifiers = getActiveModifiers(e);
+        if (this._lastMouseMove !== null && (modifiers.length > 0)) {
             if (this._inputtingText()) { return; }
             const syntheticMouseEvent = new MouseEvent(this._lastMouseMove.type, {
                 screenX: this._lastMouseMove.screenX,
                 screenY: this._lastMouseMove.screenY,
                 clientX: this._lastMouseMove.clientX,
                 clientY: this._lastMouseMove.clientY,
-                ctrlKey: e.ctrlKey,
-                shiftKey: e.shiftKey,
-                altKey: e.altKey,
-                metaKey: e.metaKey,
+                ctrlKey: modifiers.includes('ctrl'),
+                shiftKey: modifiers.includes('shift'),
+                altKey: modifiers.includes('alt'),
+                metaKey: modifiers.includes('meta'),
                 button: this._lastMouseMove.button,
                 buttons: this._lastMouseMove.buttons,
                 relatedTarget: this._lastMouseMove.relatedTarget