Backspace is not deleting current input

[moshe5745]

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

[AlexMiniApps]

@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]

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 ([email protected]) 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]

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

[AlexMiniApps]

@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]

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]

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

[AlexMiniApps]

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

[AlexMiniApps]

@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]

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

נשלח מה-iPhone שלי

‫ב-25 ביוני 2020, בשעה 22:23, ‏‏Alex D ‏[email protected] כתב/ה:‬

 @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]

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]

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]

@moshe5745 Thanks, I will check with that params.

[AlexMiniApps]

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

[moshe5745]

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]

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.

[AlexMiniApps]

@moshe5745 Thanks, I will recheck once again.

[AlexMiniApps]

@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]

2. Didn't get any message on that. (No alert modal)

4. 5. Empty item dont produce any alert like step number 2.

[moshe5745]

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

[moshe5745]

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]

@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]

@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]

Same behavior. No Alert triggered.

[AlexMiniApps]

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