fix(lib): android input value registration

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.1.1
+
+### Fixed
+
+- [(#27)](https://github.com/pkovzz/ngx-otp-input/issues/27) Android input events
+
 ## 1.1.0
 
 ### Added

projects/ngx-otp-input/README.md

@@ -196,16 +196,16 @@ If `hideInputValues` is set to `true`, the input values will be hidden by defaul
 
 ## Contributing
 
-If you would like to contribute to this project, please refer to the [CONTRIBUTING](/../../CONTRIBUTING.md) file for more information.
+If you would like to contribute to this project, please refer to the [CONTRIBUTING](https://github.com/pkovzz/ngx-otp-input/blob/master/CONTRIBUTING.md) file for more information.
 
 ## Code of Conduct
 
-Please read the [CODE OF CONDUCT](/../../CODE_OF_CONDUCT.md) file for more information.
+Please read the [CODE OF CONDUCT](https://github.com/pkovzz/ngx-otp-input/blob/master/CODE_OF_CONDUCT.md) file for more information.
 
 ## Changelog
 
-See the [CHANGELOG](/../../CHANGELOG.md) file for details.
+See the [CHANGELOG](https://github.com/pkovzz/ngx-otp-input/blob/master/CHANGELOG.md) file for details.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](/../../LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/pkovzz/ngx-otp-input/blob/master/LICENSE) file for details.

projects/ngx-otp-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-otp-input",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "peerDependencies": {
     "@angular/common": ">=14.0.0",
     "@angular/core": ">=14.0.0"

projects/ngx-otp-input/src/lib/directives/inputNavigations.directive.ts

@@ -17,40 +17,6 @@ export type OtpValueChangeEvent = [number, string];
   selector: '[ngxInputNavigations]',
 })
 export class InputNavigationsDirective implements AfterContentInit {
-  private readonly nonInputKeys = [
-    'Alt',
-    'Control',
-    'Meta',
-    'Shift',
-    'CapsLock',
-    'Backspace',
-    'Escape',
-    'ArrowLeft',
-    'ArrowUp',
-    'ArrowRight',
-    'ArrowDown',
-    'F1',
-    'F2',
-    'F3',
-    'F4',
-    'F5',
-    'F6',
-    'F7',
-    'F8',
-    'F9',
-    'F10',
-    'F11',
-    'F12',
-    'ContextMenu',
-    'Insert',
-    'Home',
-    'End',
-    'PageUp',
-    'PageDown',
-    'Tab',
-    'Enter',
-  ];
-
   private inputsArray: ElementRef<HTMLInputElement>[] = [];
 
   @ContentChildren('otpInputElement', { descendants: true })
@@ -103,34 +69,14 @@ export class InputNavigationsDirective implements AfterContentInit {
     }
   }
 
-  @HostListener('keydown', ['$event'])
-  onKeyDown(event: KeyboardEvent): void {
-    if (
-      this.nonInputKeys.includes(event.key) ||
-      (event.code === 'KeyA' && event.ctrlKey === true) || // Allow: Ctrl+A
-      (event.code === 'KeyC' && event.ctrlKey === true) || // Allow: Ctrl+C
-      (event.code === 'KeyV' && event.ctrlKey === true) || // Allow: Ctrl+V
-      (event.code === 'KeyX' && event.ctrlKey === true) || // Allow: Ctrl+X
-      (event.code === 'KeyA' && event.metaKey === true) || // Cmd+A (Mac)
-      (event.code === 'KeyC' && event.metaKey === true) || // Cmd+C (Mac)
-      (event.code === 'KeyV' && event.metaKey === true) || // Cmd+V (Mac)
-      (event.code === 'KeyX' && event.metaKey === true) // Cmd+X (Mac)
-    ) {
-      return; // let it happen, don't do anything
-    } else if (!this.regexp.test(event.key)) {
-      event.preventDefault();
-    }
-  }
-
-  @HostListener('keyup', ['$event'])
-  onKeyUp(event: KeyboardEvent): void {
+  @HostListener('input', ['$event'])
+  onKeyUp(event: InputEvent): void {
     const index = this.findInputIndex(event.target as HTMLElement);
-    if (
-      event.key.match(this.regexp) &&
-      !this.nonInputKeys.includes(event.key)
-    ) {
-      this.valueChange.emit([index, event.key]);
+    if (event.data?.match(this.regexp)) {
+      this.valueChange.emit([index, event.data]);
       this.setFocus(index + 1);
+    } else {
+      this.inputsArray[index].nativeElement.value = '';
     }
   }
 }

src/app/app.component.ts

@@ -30,7 +30,7 @@ export class AppComponent implements OnInit {
   otpStatusEnum = NgxOtpStatus;
   showNgxOtpInput = true;
   otpOptions: NgxOtpInputComponentOptions = {
-    otpLength: 6,
+    otpLength: 5,
     autoFocus: true,
     autoBlur: true,
     hideInputValues: false,