Merge pull request #48 from krzysztof-zych/bugs/prevent-dead-keys

Use beforeinput event to prevent input the Dead keys
changhuixu · Mar 9, 2021 · 65e6dc0 · 65e6dc0
2 parents d6eb388 + 3b7a6e2
commit 65e6dc0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/cypress/integration/keyboard-events.spec.ts b/cypress/integration/keyboard-events.spec.ts
@@ -18,6 +18,13 @@ describe('Keyboard Typing', () => {
       .clear();
   });
 
+  it('should prevent dead keys', () => {
+    cy.get('#digit-only')
+        .type('~~ ~! ~@ ~^')
+        .should('have.value', '')
+        .clear();
+  });
+
   it('should accept a decimal point', () => {
     cy.get('#digit-only-decimal')
       .type('1s2d4d*(,.3')

diff --git a/projects/uiowa/digit-only/src/lib/digit-only.directive.ts b/projects/uiowa/digit-only/src/lib/digit-only.directive.ts
@@ -55,6 +55,17 @@ export class DigitOnlyDirective implements OnChanges {
     }
   }
 
+  @HostListener('beforeinput', ['$event'])
+  onBeforeInput(e: InputEvent): any {
+    if (isNaN(Number(e.data))) {
+      if(e.data === this.decimalSeparator) {
+        return; // go on
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
   @HostListener('keydown', ['$event'])
   onKeyDown(e: KeyboardEvent): any {
     if (