bug: ios, autofill not working properly in wkwebview

Bug Report

I believe it is the same issue as #22682 and #22757, with reproduction instruction.

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: On a login form using ion-input, the iOS Keychain does fill username and password. But the secondary ion-input item does not see changes. By “secondary” I mean the one that was not touched.

For example:

1. Touch “email” input
2. Autofill with iOS Keychain
3. email and password are filled but only the ion-input email field is updated. The value of ion-input password is empty.

Or:

1. Touch the “password” input
2. Autofill with iOS Keychain
3. email and password are filled but only the ion-input password field is updated. The value of ion-input email is empty.

Expected behavior: Ion-Input should see the change of the underlying input item.

Steps to reproduce:

Sample project based on ionic starter blank: https://github.com/florian72810/ion-input-password-ios-keychain

The issue happens on real device or simulator, I checked on “Simulator iPod touch 7th Generation - iOS 14.5”, “Simulator iPod touch 7th Generation - iOS 13.0”, and also on real device “iPhone XS Max - iOS 14.5”.

The iOS Keychain need to have some content. You have to enable it first and put some data. (see screenshot at bottom)

If you are using a simulator, you have to disconnect the hardware keyboard in order to see the visual keyboard: I/O > Keyboard > Connect Hardware Keyboard (unchecked).

On the following video, you can see the bug.

• touch “password” input
• select “Passwords” in visual keyboard
• select something from the keychain

• now both fields show data, but you can see that only ion-input email value is still empty.

• write the letter “a” in the end of email input

• now the ion-input email value has data: the data from the keychain (here ‘demo’) and the letter added (here ‘a’)

https://user-images.githubusercontent.com/20518933/118987623-1e016c80-b989-11eb-890e-7611df8c0882.mp4

Other information:

• The bug also happens with Ionic/Vue.
• I have not tested with Capacitor.
• I am 99% sure that it was working as expected before, around September 2020.

The AppStore validation team seem to be using the keychain to test app because they refused my app yesterday due to this bug.

It is still possible to access the native input field to bypass this bug.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 0.1102.13
   @angular-devkit/schematics    : 11.2.13
   @angular/cli                  : 11.2.13
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/foxer/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v14.15.4 (/Users/foxer/.nvm/versions/node/v14.15.4/bin/node)
   npm               : 6.14.10
   OS                : macOS Big Sur
   Xcode             : Xcode 12.5 Build version 12E262

[florian72810]

The workaround works 👍

[liamdebeasi]

Hi everyone,

I am posting here again as I am merging a related thread.

This thread is tracking a bug in WKWebView where the autofill feature in iOS is not updating the value property in ion-input. This bug impacts Cordova/Capacitor apps but does not impact apps running in mobile Safari.

I will post here when a fix has been shipped in iOS. In the meantime, if anyone has links to production apps that are impacted by this bug, please feel free to post them. This can sometimes help get WebKit bugs fixed faster.