search

AlexMiniApps / angular-code-input

Code (number/chars/otp/password) input component for angular 7, 8, 9, 10, 11, 12+ projects including Ionic 4, 5 +
MIT License
180 stars 50 forks source link

Backspace is not deleting current input #10

Open moshe5745 opened 4 years ago

moshe5745 commented 4 years ago

On real device(Ionic app), if the cursor is before character the input field is not deleted. In browser it's working fine.

for_github

AlexMiniApps commented 4 years ago

@moshe5745 Thanks for the feedback. I will check. What is the device and OS version? Please also provide the config and version of the angular-code-input. Ionic and plugins versions.

moshe5745 commented 4 years ago

Its android 9, i updated the angular-code-input to 1.2.1.

Ionic info: Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 5.1.0 @angular-devkit/build-angular : 0.901.9 @angular-devkit/schematics : 9.1.9 @angular/cli : 9.1.9 @ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : android 8.1.0, browser 6.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 19 other plugins)

Utility:

cordova-res : not installed native-run (update available: 1.0.0) : 0.2.9

System:

Android SDK Tools : 26.1.1 (/Users/moshe_ch/Library/Android/sdk) NodeJS : v12.16.3 (/usr/local/bin/node) npm : 6.14.5 OS : macOS Catalina

package.json: "dependencies": { "@angular/common": "^9.1.4", "@angular/core": "^9.1.4", "@angular/forms": "^9.1.4", "@angular/platform-browser": "^9.1.4", "@angular/platform-browser-dynamic": "^9.1.4", "@angular/router": "^9.1.4", "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/pro-duotone-svg-icons": "^5.13.0", "@fortawesome/pro-light-svg-icons": "^5.13.0", "@fortawesome/pro-regular-svg-icons": "^5.13.0", "@fortawesome/pro-solid-svg-icons": "^5.13.0", "@ionic-native/app-version": "^5.26.0", "@ionic-native/core": "^5.22.0-beta-1", "@ionic-native/device": "^5.25.0", "@ionic-native/keyboard": "^5.25.0", "@ionic-native/market": "^5.26.0", "@ionic-native/native-audio": "^5.25.0", "@ionic-native/network": "^5.25.0", "@ionic-native/network-interface": "^5.25.0", "@ionic-native/splash-screen": "^5.26.0", "@ionic-native/status-bar": "^5.22.0-beta-1", "@ionic/angular": "5.1.0", "@ionic/storage": "^2.2.0", "@ngrx/effects": "^9.1.2", "@ngrx/router-store": "^9.1.2", "@ngrx/store": "^9.1.2", "@ngrx/store-devtools": "^9.0.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "@types/lodash": "^4.14.149", "@types/remote-redux-devtools": "^0.5.4", "angular-code-input": "^1.2.1", "cordova-android": "^8.1.0", "cordova-browser": "6.0.0", "cordova-plugin-app-version": "^0.1.9", "cordova-plugin-market": "^1.2.0", "cordova-plugin-nativeaudio": "^3.0.9", "cordova-plugin-nativeclicksound": "0.0.4", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-networkinterface": "^2.0.0", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-wifi-info": "file:plugins_src/WifiInfo", "cordova-sqlite-storage": "^5.0.0", "core-js": "^2.6.9", "lodash": "^4.17.15", "malam-clock-apkpull": "file:plugins_src/ApkPull", "malam-clock-fingerprint": "file:plugins_src/FingerPrint", "malam-clock-kioskmode": "file:plugins_src/KioskMode", "malam-clock-macaddress": "file:plugins_src/MacAddress", "malam-clock-powermanagment": "file:plugins_src/PowerManagement", "malam-clock-rfid": "file:plugins_src/RFID", "malam-clock-shellexecutor": "file:plugins_src/ShellExecutor", "moment": "^2.25.3", "native-run": "^0.2.9", "ngx-take-until-destroy": "^5.4.0", "rxjs": "^6.5.5", "rxjs-etc": "^10.3.1", "tslib": "^1.11.2", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/architect": "^0.901.4", "@angular-devkit/build-angular": "^0.901.4", "@angular-devkit/core": "^9.1.4", "@angular-devkit/schematics": "^9.1.4", "@angular/cli": "^9.1.4", "@angular/compiler": "^9.1.4", "@angular/compiler-cli": "^9.1.4", "@angular/language-service": "^9.1.4", "@ionic/angular-toolkit": "2.2.0", "@ionic/cli": "^6.9.3", "@ngrx/schematics": "^9.0.0", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.12.38", "codelyzer": "^5.1.2", "cordova": "^9.0.0", "cordova-plugin-device": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.0.5", "cordova-plugin-ionic-webview": "^4.2.1", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.5.3", "prettier": "^1.19.1", "pretty-quick": "^1.11.1", "protractor": "^5.4.4", "remotedev": "^0.2.9", "rxjs-tslint-rules": "^4.31.0", "ts-node": "^8.10.1", "tslint": "^5.20.1", "tslint-config-prettier": "^1.18.0", "tslint-consistent-codestyle": "^1.16.0", "tslint-eslint-rules": "^5.4.0", "tslint-immutable": "^5.5.2", "typescript": "~ }

moshe5745 commented 4 years ago

I think its connected to the fact its a touch screen. And there is other events in touch screen rather in browser.

AlexMiniApps commented 4 years ago

@moshe5745 thanks. But what is the model of your device? What is the config of the angular-code-input component which you have embedded to the screen?

Note: Each build is tested on real devices as on iOS as on Android.

moshe5745 commented 4 years ago

Its a tablet, from private manufacture. They created this model for us. Its a Qualcomm board. Nothing special.

The component config: <code-input [isCodeHidden]="false" [isNonDigitsCode]="false" [isPrevFocusableAfterClearing]="true" [codeLength]="4" (codeCompleted)="onCodeCompleted($event)">

moshe5745 commented 4 years ago

Maybe i can check this issue too, when i have time. And maybe make a PR.

AlexMiniApps commented 4 years ago

@moshe5745 ok. I will try to reproduce the issue. If I will notify you.

AlexMiniApps commented 4 years ago

@moshe5745 I have checked on several devices & emulators too, but I can not to reproduce the issue. I guess your device may has the old system webview or maybe has custom keyboard events. The first simplest solution is triying to update system webview.

moshe5745 commented 4 years ago

Ok,thanks. I will try it and update you.

נשלח מה-iPhone שלי

‫ב-25 ביוני 2020, בשעה 22:23, ‏‏Alex D ‏notifications@github.com כתב/ה:‬

 @moshe5745 I have checked on several devices & emulators too, but I can not to reproduce the issue. I guess your device may has the old system webview or maybe has custom keyboard events. The first simplest solution is triying to update system webview.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

moshe5745 commented 4 years ago

Thanks for not closing this issue. We will try to reproduce this as soon as possible. Have a lot of pressure right now in the project.

moshe5745 commented 4 years ago

Wanted to update you with the following: The library version is: "angular-code-input": "^1.2.1", And the webview is: "cordova-plugin-ionic-webview": "^4.2.1", But more important is that i said its android 9. But apparently its 8, not 9.

AlexMiniApps commented 4 years ago

@moshe5745 Thanks, I will check with that params.

AlexMiniApps commented 3 years ago

@moshe5745 Hello, can you check does this issue still actual?

moshe5745 commented 3 years ago

Hey, yes. Its still the same in our device. "angular-code-input": "^1.2.1", We made a workaround to clear all the inputs with one button. But of course it would be better if we had the "regular" char delete.

moshe5745 commented 3 years ago

Just updated to 1.3.3 and now the delete works(partialy)! Thanks! I made in GIF file to explain why i think its partial. Cause its hard to explain. img-1764-ye8glnjv-e0u7_WOH3gtu7

AlexMiniApps commented 3 years ago

@moshe5745 Thanks, I will recheck once again.

AlexMiniApps commented 3 years ago

@moshe5745 Taking into account that I can not to reproduce the issue I need some more assistance from you.

Please connect the component from the attachment (lib.zip) instead of the npm package.

  1. Just unpack the lib somewhere in your app
  2. In the module where the component is being imported, instead of this: import { CodeInputModule } from 'angular-code-input'; use like this (please replace with the correct path where you will place the lib): import { CodeInputModule } from './lib/code-input.module';

After installation and launching please perform only the following operations on the empty input component:

  1. Focus the input on the second empty item
  2. Press the backspace (del) key on the empty item. Send the screenshot of the screen with the message here.
  3. Enter some value to the item. Send the screenshot of the screen with the message here.
  4. Press the backspace (del) key on the filled item. Send the screenshot of the screen with the message here.
  5. Press the backspace (del) key on the empty item. Send the screenshot of the screen with the message here.
moshe5745 commented 3 years ago
  1. Didn't get any message on that. (No alert modal)

  2. IMG_1779 (1)

  3. IMG_1780

  4. Empty item dont produce any alert like step number 2.
moshe5745 commented 3 years ago

Maybe this is related: https://stackoverflow.com/questions/12730635/cannot-receive-keycode-del-on-webview-in-android-4-1-1

moshe5745 commented 3 years ago

One possible workaround for this. To put a blank space(" ") in all inputs. If user fill the input the outcome will be the input without the space. If user deletes the input the outcome will be again a blank space(" ").

AlexMiniApps commented 3 years ago

@moshe5745 thank you for the research! I will send a new version with more diagnostic info. I need to understand what the events the keyboard produces if there is no any value in the input.

AlexMiniApps commented 3 years ago

@moshe5745 Please change the lib from attached lib_m.zip and do the follow:

  1. Focus the input on any empty item
  2. Press the backspace (del) key on the empty item. Send the screenshot of the screen with the message here.

I guess it is related to this https://bugs.chromium.org/p/chromium/issues/detail?id=118639

moshe5745 commented 3 years ago

Same behavior. No Alert triggered.

AlexMiniApps commented 3 years ago

@moshe5745 Thanks again. I will think about how it can be fixed.