iOS 12 password manager autofill not updating ion-input

[rcolinray]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
The user tries to use a the new password manager autofill feature in iOS 12 to automatically fill out ion-inputs for username and password. Both fields appear filled out, but only the first input is updated. The second field shows the placeholder text overlapping the password "dots" and the value is not updated which prevents validation from working.

Expected behavior:
Both fields to be updated so they show the correct style and validation works. If I connect to the app in native iOS Safari this appears to be the case.

Steps to reproduce:

1. Tap on username field to focus
2. Click "Passwords" button above keyboard
3. Select password manager and saved username/password to autofill

Related code:

<form #loginForm="ngForm">
   <!-- Username/password fields -->
   <ion-list>
      <ion-item>
         <ion-label floating>
            Username
         </ion-label>
         <ion-input type="email"
                    required
                    autocapitalize="off"
                    autocomplete="username"
                    minlength="3"
                    name="username"
                    [(ngModel)]="username">
         </ion-input>
      </ion-item>
      <ion-item>
         <ion-label floating>
            Password
         </ion-label>
         <ion-input type="password"
                    required
                    autocomplete="current-password"
                    minlength="1"
                    name="password"
                    [(ngModel)]="password"></ion-input>
      </ion-item>
   </ion-list>
   <!-- Log in button -->
   <button ion-button
           color="primary"
           block
           [disabled]="!loginForm.form.valid">
      Sign In
   </button>
</form>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.4
   Cordova Plugins       : cordova-plugin-ionic 5.2.4, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 9 other plugins)

System:

   NodeJS : v11.4.0 (/usr/local/Cellar/node/11.4.0/bin/node)
   npm    : 6.4.1
   OS     : macOS
   Xcode  : Xcode 10.1 Build version 10B61

[Sampath-Lokuge]

Have you found any solution for this?

[websitedesignanddeveloper]

Same issue, is anyone found any solution?

[Sampath-Lokuge]

@websitedesignanddeveloper It seems they have fixed this issue on Ionic 4. But I didn't test that since I need it for the Ionic 3 app. But no solution yet for Ionic 3.
ionic-team/ionic-framework#17043

[moritzgloeckl]

Does not seem to be fixed on "@ionic/angular": "^4.1.1"

[rcolinray]

Just switched over to using matInput instead of ion-input and I'm still seeing the issue, so it looks like it may not be specific to Ionic.

[sinan92]

I think removing ion-item will solve your problem. For me however it doesn't save the name and password at all.

[FreitasJonas]

Anyone had some news about this problem?

[ksoni23]

I also had the same issue. Autofill values are not reflected in the ion-input but i found that values exist in shadow-dom. We can read values from shadow dom and force update the bindings or angular form.

[cyptus]

related to ionic-team/ionic-framework#19478?

[chrux]

I have to use (change)=forceUpdateMethod($event.target.value) to force the pass of the value to the ion-input and form object or property.

[initMrD]

Same issue, Apple rejected my review for this.

[MazzMazz]

The way i solved this problem.

1. Replace ion-item with a div to allow password autocomplete from the email field.
2. a (change) event is triggered on the field without focus. With form.controls[fieldName].setValue($event.target.value) the form control is forced to update the field without focus.

<form #form="ngForm" (ngSubmit)="login(form)">
    <div class="ion-padding">
         <div> <!-- ion-item -->
               <ion-label position="floating">E-Mail</ion-label>
               <ion-input name="email" type="email"
                              ngModel
                              required
                              autocomplete="username"
                              (change)="form.controls['email'].setValue($event.target.value)">
               </ion-input>
               </div>
               <div>
               <ion-label position="floating">Passwort</ion-label>
               <ion-input name="password"
                              type="password"
                              (change)="form.controls['password'].setValue($event.target.value)"
                              ngModel
                              required
                              autocomplete="password"></ion-input>
          </div>
     </div>
</form>

After adding this (change) trigger the login method received the proper email/password.

Edit: Just noticed this as Ionic3 Problem - had this problem in ionic5

[dbrils]

Also having this issue over here; iPhone 6S with iOS 14.5 allows me to use keychain to autofill my credentials. When doing this it seems like both html input fields (username and password) are filled in, however the password field value is not reflected in the formcontrol. This caused my entire formgroup to stay invalid, which disables my login button. The workaround mentioned by @MazzMazz does seem to do the trick, but this seems like something Apple has to fix in the WKWebView. Especially since everything works fine inside of Android and PWA.

EDIT: Also using Ionic 5 with Angular 8

[f1ght4fun]

it doesnt work for me in ionic6 ... with ion-item or w/o ... value is not propagated to the form until focus is set to any of the fields.

and havent found yet a good hacky hook or option to identify when password from keychain or any other app is field and card is closed to setFocus to a field programmatically at least

[londi]

Same behavior in my app. +1
(Ionic 5 and ionic 6)