bug: ion-input duplicate input values and delete key does not work with Japanese keyboard

[tatsuyasenbom]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

• In ion-input on iOS 15.2 x Ionic 6.0.4, two characters are entered with one tap, and the delete key does not work.
  • https://user-images.githubusercontent.com/87968771/151362623-b765c51c-c8b2-40b9-bc65-47bce33929c3.mp4
• This bug does not occur on the latest Google Chrome on Android 12 or Windows 11.

Expected Behavior

• I want that the bugs reported in the Current Behavior will be improved.

Steps to Reproduce

• It can be reproduced by any of the following build methods.
  • ionic serve --address xxx.xxx.xxx.xx
  • ionic biuld --prod

Code Reproduction URL

tatsuyasenbom/ionic-angular-sample@ae4184a

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@ionic\cli)        
   Ionic Framework               : @ionic/angular 6.0.4
   @angular-devkit/build-angular : 13.2.0
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : not installed
   @capacitor/core    : 3.3.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.13
   OS     : Windows 10

Additional Information

No response

[tatsuyasenbom]

In Ionic 6.0.3, this bug did not occur.

[tatsuyasenbom]

I confirmed the following today.

• I have confirmed the same phenomenon with Ionic 6.0.5.
  • tatsuyasenbom/ionic-angular-sample@6abb869
• Last time, I confirmed duplicate input with full-width Japanese input, but this time I confirmed the same phenomenon with half-width alphabet input.
  • https://user-images.githubusercontent.com/87968771/152292839-dce2f22a-1c4a-4db6-b6a5-63986496c71a.mp4

[tatsuyasenbom]

This phenomenon occurs when IME in Japanese is used, but it has been confirmed that this phenomenon does not occur when IME in English is used.

[tatsuyasenbom]

Even if IME in Japanese is used in ion-textarea, this phenomenon does not occur, so I decided to use it instead of ion-input temporarily.

[sean-perkins]

@tatsuyasenbom if you are able, I would greatly appreciate instructions or a resource/link that explains how I can set-up my environment to verify the issue in Japanese.

I have both a Windows and Mac available to test with, as well as an iPhone.

Thank you!

[tatsuyasenbom]

@tatsuyasenbom if you are able, I would greatly appreciate instructions or a resource/link that explains how I can set-up my environment to verify the issue in Japanese.

I have both a Windows and Mac available to test with, as well as an iPhone.

Thank you!

Thank you for contacting me!

I don't have a Mac for financial reasons, so I was in trouble because I couldn't observe the logs .....

IME in Japanese can be set-uped or switched by following the procedure described in the link below.

• https://techwiser.com/use-japanese-keyboard-iphone

If the system language is not Japanese, you can move to the IME setting screen by pressing and holding the globe mark on the displayed software keyboard after focusing on ion-input.

[sean-perkins]

@tatsuyasenbom thank you so much!

I was able to reproduce your issue in your application with the Japanese keyboard. We will capture this as a bug and prioritize.

One odd thing I noticed, is that this issue does not seem present in our standalone examples without Angular. I'll capture this as an Angular bug for now.

[tatsuyasenbom]

@tatsuyasenbom thank you so much!

I was able to reproduce your issue in your application with the Japanese keyboard. We will capture this as a bug and prioritize.

One odd thing I noticed, is that this issue does not seem present in our standalone examples without Angular. I'll capture this as an Angular bug for now.

Thank you for your confirmation.

Certainly, I updated to Angular 13 at the same time as the update to Ionic 6.0.4.

It's a phenomenon that Ionic 6.0.3 and Angular 12 couldn't confirm.

Thank you.

[sean-perkins]

@tatsuyasenbom I have been able to find the code that introduces this issue.

PR #24606 introduced changes to how the native input value is set. This appears to be conflicting with the Japanese keyboard inputs.

In the interim you can set your application to 6.0.3 to avoid this issue.

I'll follow-up when I have found a resolution that satisfies this issue and the original issue my PR aimed to fix. Thanks!

[tatsuyasenbom]

@tatsuyasenbom I have been able to find the code that introduces this issue.

PR #24606 introduced changes to how the native input value is set. This appears to be conflicting with the Japanese keyboard inputs.

In the interim you can set your application to 6.0.3 to avoid this issue.

Wonderful!
Thank you for sharing the cause of the problem!
I understood!

I'll follow-up when I have found a resolution that satisfies this issue and the original issue my PR aimed to fix. Thanks!

I am looking forward to!

[sean-perkins]

@tatsuyasenbom Can you test with the following build and let me know if the issue is resolved on your device?

npm install @ionic/[email protected]

For reference, I tested locally with my iPhone XS Max and was able to see both the duplicate values and the delete key issues resolved.

Thanks!

[tatsuyasenbom]

npm install @ionic/[email protected]

I've confirmed that @ionic/[email protected] on iPhone SE (2nd generation) has improved the problem!

Thank you!

[sean-perkins]

The fix will be publicly available in v6.0.6 (releasing this week). Thanks!

[tatsuyasenbom]

The fix will be publicly available in v6.0.6 (releasing this week). Thanks!

Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.