fix: merge pull request #803 from qonto/use-keyboard-event-key

feat: use KeyboardEvent.key instead of KeyboardEvent.keyCode
qonto · Jul 2, 2024 · d7554d9 · d7554d9
2 parents 2ffcfb1 + 6ff26f6
commit d7554d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/ember-amount-input/src/components/amount-input.hbs b/ember-amount-input/src/components/amount-input.hbs
@@ -14,6 +14,7 @@
     placeholder={{this.placeholder}}
     disabled={{@disabled}}
     readonly={{@readonly}}
+    aria-labelledby={{@ariaLabelledBy}}
     {{on 'keydown' this.onKeyDown}}
     {{on 'input' this.onInput}}
     {{on 'paste' this.onPaste}}

diff --git a/ember-amount-input/src/components/amount-input.ts b/ember-amount-input/src/components/amount-input.ts
@@ -2,11 +2,16 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import './amount-input.css';
 
-const KEY_CODE_E = 69;
-const KEY_CODE_FULLSTOP = 190;
-const KEY_CODE_COMMA = 188;
+const KEY_E = 'e';
+const KEY_FULLSTOP = '.';
+const KEY_COMMA = ',';
 
 export interface AmountInputArgs {
+  /**
+   * The arial label for the input
+   */
+  ariaLabelledBy?: string;
+
   /**
    * The currency displayed in the input
    */
@@ -130,12 +135,13 @@ export default class AmountInput extends Component<AmountInputSignature> {
 
   @action
   onKeyDown(event: KeyboardEvent): boolean {
-    if (event.keyCode === KEY_CODE_E) {
+    const pressedKey = event.key.toLowerCase();
+    if (pressedKey === KEY_E) {
       event.preventDefault();
       return false;
     } else if (
       this.numberOfDecimal === 0 &&
-      [KEY_CODE_FULLSTOP, KEY_CODE_COMMA].includes(event.keyCode)
+      [KEY_FULLSTOP, KEY_COMMA].includes(pressedKey)
     ) {
       event.preventDefault();
       return false;