0

(originally posted in the ionic forum, no response, so re-posted on SO for a larger audience)

One of my app users is facing a weird problem. He is using a DE keyboard and has observed an odd behavior on both Galaxy S7 and Tab S2.

When entering input, the correct character shows up and then gets replaced with either a duplicate character or a wrong character.

Please see this video: https://youtu.be/3EHKaApn7wA

The input code is this:

<h4>{{'kWizPortalUrl' | translate}}</h4>
  <label class="item item-input">
  <input autocorrect="off" autocapitalize="none" autocomplete="off" type="text" placeholder="e.g. http://server/zm" ng-model="wizard.portalurl">
  </label>

I then tried to create a simplified codepen for him to load on his android device - that doesn't cause a problem. That codepen is here

I'm at a complete loss on why this is happening. Any thoughts?

List of plugins used

cordova plugin list
com.jcjee.plugins.emailcomposer 1.4.6 "Email Composer with Attachments"
com.telerik.plugins.nativepagetransitions 0.6.5 "Native Page Transitions"
cordova-plugin-android-permissions 0.10.0 "Permissions"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-certificates 0.6.4 "Certificate Plugin"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.4 "Console"
cordova-plugin-device 1.1.4-dev "Device"
cordova-plugin-file 4.3.0 "File"
cordova-plugin-globalization 1.0.5-dev "Globalization"
cordova-plugin-inappbrowser 1.5.0 "InAppBrowser"
cordova-plugin-insomnia 4.2.0 "Insomnia (prevent screen sleep)"
cordova-plugin-ios-longpress-fix 1.1.0 "iOS LongPress Fix"
cordova-plugin-media 1.0.2-dev "Media"
cordova-plugin-network-information 1.3.0 "Network Information"
cordova-plugin-pin-dialog 0.1.3 "PinDialog"
cordova-plugin-settings-hook 0.2.3 "Cordova Settings Hooks"
cordova-plugin-splashscreen 4.0.0 "Splashscreen"
cordova-plugin-statusbar 2.2.0 "StatusBar"
cordova-plugin-touchid 0.4.0 "Touch ID"
cordova-plugin-websocket 0.12.0 "WebSocket for Android"
cordova-plugin-whitelist 1.3.0 "Whitelist"
cordova-sqlite-storage 1.4.8 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
org.devgeeks.Canvas2ImagePlugin 0.6.0 "Canvas 2 Image"
phonegap-plugin-mobile-accessibility 1.0.5-dev "Mobile Accessibility"
phonegap-plugin-push 1.8.3 "PushPlugin"

ionic info:

Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: Not installed
ios-sim version: 5.0.2 
OS: Mac OS X El Capitan
Node Version: v5.11.0
Xcode version: Xcode 8.1 Build version 8B62

I also tried with this in my CSS

.cloned-text-input {
  display: none !important;
}

No difference.

I have no idea where to look - thoughts?

user1361529
  • 2,667
  • 29
  • 61
  • 1
    I'm having a very similar issue on android 6.0 on a samsung device, using react + cordova. I'd type `123@1`, backspace twice so the value is `123`, then add @ to make `123@` and then the moment I had any other character after the @ sign, it will duplicate the first character, making a value of `1123@`. I have seen your exact same issue as well, but I haven't yet to reproduce it consistently. Doesn't answer your question, but suggests it might not be totally related to the ionic framework. – Norman Breau Nov 08 '16 at 18:30
  • Good to know there are at least 2 other developers who've been haunted by Android keyboard ghosts! – user1361529 Nov 08 '16 at 20:57
  • 1
    For me, I've duplicated the bug using vanilla javascript/html5. For me the problem seem to come from using ``. I haven't reproduced it with type `text` however, which appears to be your problem. I haven't found a solution as of yet. OClyde's post does work however, if the user turns off predictive text on their android device. Useful info, but not a satisfactory solution for me. – Norman Breau Nov 09 '16 at 16:48
  • I came across http://stackoverflow.com/questions/32968624/prevent-samsung-predictive-text-in-html-form - see last post - trick it to start as password and change style on input - I can't test it as I don't have a device that causes this issue. Can you give the last suggestion a try? – user1361529 Nov 10 '16 at 15:30
  • I came across that same post, and I've tried several of the HTML5 attributes, but they didn't work. I didn't try the password trick however, I'll post my results soon. – Norman Breau Nov 10 '16 at 22:27
  • It appears to work. If I render the input field as type password, then as long as the input field is focused, if I switch the type to email, I get the email keyboard without the predictive text issues. I used the focus event to change the the type to the desired type. – Norman Breau Nov 10 '16 at 23:38
  • Good lord - what a terrible hack but at least a solution! Thanks for trying! – user1361529 Nov 11 '16 at 14:22
  • It is dirty. It makes it difficult if you want to pre-populate a field with a value. It will be masked until you focus the field. Fortunately in my case I do not need to pre-populate the field with any value. – Norman Breau Nov 11 '16 at 18:45
  • I just want to point out that the hack appears to break android 4.1. It's causing odd keyboard bugs, (like the keyboard disappearing, textfield defocusing, etc). The behaviour is inconsistent, happens on some devices running 4.1, but not others. – Norman Breau Nov 14 '16 at 18:22
  • Thanks for diving into this. I've decided not to implement this hack - I've instead just put a text notice that shows up if you are running on Android asking the to disable auto-correct if they are facing issues entering text. – user1361529 Nov 15 '16 at 14:16

1 Answers1

1

Encountered this problem as well.. My guess is that this is caused by the Samsung stock keyboard.. Check this link: https://www.google.de/amp/amp.androidcentral.com/how-turn-and-autocorrect-samsung-galaxy-s4?client=ms-android-oneplus

OClyde
  • 1,036
  • 6
  • 11
  • Interesting, I'll ask him to try disable the auto-correct, but its odd if this was the issue that the codepen I asked him to try above (in my original post) would not exhibit the same issue? – user1361529 Nov 08 '16 at 20:40
  • That's true.. The other possibility I'd see would be a browser bug not appearing in Chrome itself but in the System WebView, but that's a pure guess. :) – OClyde Nov 08 '16 at 20:47
  • Would be interesting to test if adding Crosswalk to the project resolves the issue. Requires building a test version - that'd be some effort, just an idea though ;) – OClyde Nov 08 '16 at 20:51
  • Right, I already have a crosswalk version ready - I build both versions as part of my packaging. I've tried the reverse - I asked him to run the codepen in both the system browser and chrome and he did not see any issues. I'll ask him to try the Xwalk version after he tries disabling the auto-correct option. – user1361529 Nov 08 '16 at 20:56
  • Good plan! Would be glad to hear about the result, definitely an interesting problem! – OClyde Nov 08 '16 at 20:58
  • Well what do you know -disabling predictive text worked! Not sure why it was not replicated with the codepen. – user1361529 Nov 08 '16 at 23:44
  • 1
    Strange indeed.. however, great that this is solved! Thanks for sharing your results! Still wondering though.. this predictive text feature is probably causing a lot of issues in other scenarios, too. Got to definitely keep this in mind when testing my apps! – OClyde Nov 09 '16 at 07:15