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.