How do I turn on the webview autocomplete for an login form in Ionic’s capacitor in iOS?

I want to know how to enable the autocomplete for a login form in Capacitor (or if it’s possible). I’m using Ionic React. It works if access the page in Safari on iOS and even if you pin it to the home screen. But if you bundle the web app in Capacitor, the autocomplete is not there. Here’s the code for the login form:

<form onSubmit={e => loginAndCloseModal({e, emailValue, passwordValue})}>
  <IonList>
    <IonItem>
      <IonLabel position="stacked">Email</IonLabel>
      <IonInput autocomplete="username" name="email" value={emailValue} onIonChange={e => setEmail(e.target.value)}></IonInput>
    </IonItem>
    <IonItem>
      <IonLabel position="stacked">Password</IonLabel>
      <IonInput autocomplete="current-password" name="password" type="password" value={passwordValue} onIonChange={e => setPassword(e.target.value)}></IonInput>
    </IonItem>
    { errorMessage &&
        <IonItem>
          <IonNote color="danger">{errorMessage}</IonNote>
        </IonItem> }
  </IonList>
  <IonButton class="login-button" expand="block" type="submit" disabled={authLoading}>Login</IonButton>
</form>

I’ve also tried setting autocomplete="on" as well and it didn’t work. Apple’s documentation recommends using the values posted above: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

Here’s a screenshot of the login page on the web:

Here’s a version of the login form in Capacitor:

Notice the passwords option in the above the keyboard is gone. Why is that?

Here’s the relevant dependencies of my project:

"@capacitor/cli": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@capacitor/ios": "^1.2.1",
"@ionic/react": "^4.11.2",
"@ionic/react-router": "^4.11.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",

I’m using iOS version 12.4.2

EDIT:

I’ve done some more research. There this documentation from Apple. The relevant section is this:

Enable Password AutoFill

Password AutoFill uses heuristics to determine when the user logs in or creates new passwords, and automatically provides the password QuickType bar. These heuristics give users some Password AutoFill support in most apps, even if those apps haven’t been updated to support AutoFill. However, to provide the best user experience and ensure your app fully supports Password AutoFill, perform the following steps:

Set up your app’s associated domains. To learn how to set up your app’s associated domains, see Setting Up an App’s Associated Domains.

Set the correct AutoFill type on relevant text fields. For an iOS app, see Enabling Password AutoFill on a Text Input View. For a web app, see Enabling Password AutoFill on an HTML Input Element.

I did 2 from above when I first asked this question, but not 1. However after doing number 1 it’s still not working.

Here’s some more relevant documentation from Apple.

Answer

I found a workaround here: https://github.com/ionic-team/ionic/issues/19478#issuecomment-559081576

Basically don’t wrap any of your input fields in an ion-item tag, use div instead (for example).

The corresponding WebKit bug report is this: https://bugs.webkit.org/show_bug.cgi?id=203299

Advertisement

Answer