bug: ios 14, input does not reset internal state on ios when clearing input, causing autocapitalize to not work

[kensodemann]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: With autocapitalize "on" and clearInput "true" on an ion-input, the keyboard on iOS comes up in capitalize mode, but if you type a word or two the hit the clear button added by clearInput, the input clears but the keyboard is not in capitalize mode.

A couple of notes on this:

• This is only in iOS, Android works normally
• If you backspace a couple of times after doing the clearInput, the keyboard will go back into capitalize mode and everything will work fine again
• Needs to be run on a device, autocapitalize itself does not see to work at all in the browser

Expected behavior:

After clearing the text, the keyboard would be in capitalize mode again as the user is starting a new sentence.

Steps to reproduce: Build the following repo and run on an iOS device:

https://github.com/kensodemann/test-input

1. Enter some text, notice it is capitalized.
2. Hit the clearInput button.
3. Notice the text you start typing now is not capitalized
4. Hit the clear button again
5. Hit backspace twice
6. Now the text you type will be capitalized again.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.3 (/Users/kensodemann/.nvm/versions/node/v14.15.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.5
   @capacitor/core : 2.4.5

Utility:

   cordova-res                          : 0.15.2
   native-run (update available: 1.3.0) : 1.0.0

System:

   NodeJS : v14.15.1 (/Users/kensodemann/.nvm/versions/node/v14.15.1/bin/node)
   npm    : 6.14.10
   OS     : macOS Big Sur

[liamdebeasi]

This appears to be a WebKit bug as I can reproduce this outside of Ionic Framework. The issue appears to be that programmatically clearing the input via inputEl.value = '' does not reset iOS's internal representation of the input.

So for example follow these steps:

1. Type "abc" into the input. Should render as "Abc".
2. Tap the clear button.
3. Type "abc". Should render as "abc".

If you then look at the predictive bar above the keyboard, it should show "Abcabc" as the far left option. This would explain why autocapitalize does not work as iOS thinks you are still typing as part of the first word. (You will need to set autocorrect="on" to the ion-input to see the predictive bar)

I will look into reporting this issue to the WebKit team.

[ejerskov]

I have the same issue. Anyone who knows of a workaround until its been fixed in WebKit?

[archevis]

Not sure if it has any relevance, since I don't know their implementation, but I thought I'd just point it out:

Clearing and reverting to uppercase works in Facebook Messenger on iPhone when you send a message.

[babycourageous]

@ejerskov - I too ran into this and did some searching here on the issues and found this workaround: https://github.com/ionic-team/ionic-framework/issues/21355#issuecomment-632723783

I haven't tried it yet but hopefully it works and it helps you!

[ejerskov]

@babycourageous, thanks a lot - you saved me big time! Such an annoying issue.

[archevis]

Worked! However, I'm building a chat module integrated into a larger app, and when the textarea is cleared as a result of sending a message by pressing the enter ("send") key on the keyboard it remains in lowercase mode.

Just speculating here, but I imagine it may have something to with focus never leaving any widget requiring the keyboard so that it is never "closed and immediately reopened" like a sort of forced restart.

Might there exist a way to trigger such a "closing and reopening through focus loss and regain" in an elegant way when clearing the textarea as a result of keyboard action alone? Or some other clever trick?