bug: ion-input autofill does not work when input is nested within other Ionic components

[bryplano]

Bug Report

Ionic Version:

[x] 4.x

Current behavior:

When attempting to use the username/password autofill prompt provided by the operating system (like iOS with Keychain or 1Password), if an ion-input element is nested within another Ionic component (like ion-item or ion-row), the autofill capability will not be provided to the user.

Expected behavior:

<ion-input> components should allow for autofilling regardless of whether or not they are nested (within reason) in other Ionic components.

Related code:

Repo: https://github.com/bryplano/UsernameRepro

Steps to reproduce:

See README.md on the included sample repository.

Short version:

1. Create an application that places two ion-input components - one for a username and one for a password - onto a single page app.
2. Run the app on an iOS device
3. Try to autofill the fields using a username/password autofill capability or app (iOS Keychain, 1Password, LastPass, etc.) by tapping on the username field and attempting to autofill via the keyboard shortcut
4. The Issue: Notice that if the ion-input components are nested as part of an ion-grid or an ion-list in some manner, the ion-input for username will not allow the user to autofill a value. Only the ion-input for password will autofill properly.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.8 
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.2.1

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   NodeJS : v10.16.3
   npm    : 6.9.0
   OS     : macOS Mojave

[thomasferns]

Did you find any solution for this?

[cmaas]

I can confirm this.

• It works in Safari on a Mac as expected (with Keychain)
• On an iPhone, the input for the username doesn't even show the typical autofill button and is quite flaky. See screenshot below for more info. Tested on an iPhone XS Max with iOS 13.1.3

[cmaas]

Update: When the Stencil app is loaded as a web app on a device in Safari, it actually works correctly. Somehow, the bug seems to happen when the app is run as a Capacitor app.

[cmaas]

Update2: I tried to run a test app in a different kind of Webview environment. It's a simple wrapper app around the default iOS webview. The problem exists here too. So I guess it doesn't have anything to do with Capacitor, but could be a bug in the iOS WKWebView?! Very weird...

[cmaas]

Update3: I ran more experients (some attributes omitted for brevity):

Credentials autofill works for both fields in this case:

    <ion-list>
        <div>
            <ion-label />
            <ion-input name="email" />
        </div>
        <div>
            <ion-label />
            <ion-input name="password" type="password" />
        </div>
    </ion-list>

As soon as one of the divs is replaced by ion-item, the credentials autofill doesn't work for the email field. Even if the email field remains in a div.

However, if the divs are replaced by ion-card for example, autofill works again!

There seems to be something special about ion-item in a WKWebView environment (because it works without problems in iOS Safari).

[bryplano]

FYI there is a Webkit bug out for this: https://bugs.webkit.org/show_bug.cgi?id=203299

Will have to wait for an Apple fix.

[cmaas]

@bryplano Good find, thanks for pointing this out. In the meantime, I just redesign my login form to use ion-card as suggested above. This works pretty well. I guess this issue can be closed then.

[bryplano]

No problem @cmaas! :)

Workaround: For folks who come across this issue, workarounds include un-nesting the ion-input, putting it in a div rather than nesting it beneath other ion- components or using another component (ion-card was suggested above).

Solution: Will need to be provided by Apple - Webkit bug is here: https://bugs.webkit.org/show_bug.cgi?id=203299

[cmaas]

@bryplano I also opened an issue at the capacitor repo the other day, because I thought it was related to it. I think it can be closed too: ionic-team/capacitor#2211
(And I think it helps to have as few open issues as possible for trust reasons ;))

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