Updating input fields programmatically isn't reflected on the iOS keyboard autocomplete suggestions

[duncan-c]

Ionic version:

[ ] 4.x [x] 5.x

I'm submitting a ...

[x] bug report [ ] feature request

Current behavior:

The autocomplete/autocorrect bar at the top of the iOS keyboard does not update when the input box (ion-input or ion-textarea) value is updated programatically, but the keyboard is kept up. I have a chat feature in my app where I am keeping the keyboard open when the user presses the send button, and just clearing the message field (as this is the expected behaviour of a chat app). However the keyboard's autocomplete suggestions don't reflect the fact that the input has been cleared, and so a very long string builds up when multiple messages are sent. This is also preventing messages after the first from being auto-capitalised. When the keyboard is dismissed and re-opened, the auto-complete section reflects the correct value in the input field.

Expected behavior:

The auto-complete bar in the keyboard should be updated to the current input value when the input message is changed programatically.

Steps to reproduce:

I'm using Cordova to build the app, and the problem occurs on all iOS devices.

Related code:

I've created a very simple application to reproduce the issue: https://github.com/duncan-c/ionic-ios-keyboard-issue

If you type something into the textarea, and then click the go button, you will see that the input field is cleared, but the keyboard still thinks there's text there, and doesn't clear the suggestions.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.9.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res                          : 0.14.0
   native-run (update available: 1.0.0) : 0.3.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v13.6.0 (/usr/local/Cellar/node/13.6.0/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.5 Build version 11E608c

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. I was able to reproduce this behavior with a regular textarea element as well.

CodePen Example: https://codepen.io/liamdebeasi/pen/bGVzyqY

[duncan-c]

Ah ok, so probably an iOS WebView bug then. I have actually just managed to create a workaround, for anyone who stumbles across this issue. If you pass the focus to a secondary input (with 0 height and width), then immediately pass the focus back to the original input, then the keyboard is updated.

<ion-textarea autocapitalize="sentences" spellcheck #inputTest [(ngModel)]="inputValue" placeholder="Type here"></ion-textarea>
<ion-input style="width: 0px; height: 0px;" #secondaryInput (ionFocus)='inputTest.setFocus()'></ion-input>
<ion-button (click)="inputValue = ''; secondaryInput.setFocus();">Go</ion-button>

[ionitron-bot[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.